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属性 和 属性 值 


BRE 2020 年 4 月 ，CSS 拥有 522 个 属性 ， 可 以 通过 以 下 的 JavaScript 代码 进 行 验证 。 


var element = document.createElement('div'); 
var count = 0; 

for (index in element.style) count++; 
console.log(count); // &£ 20204F4 H, Mr? 522 


在 未 来 ， 会 有 新 属性 加 入 规范 ， 同 时 会 有 旧 属 性 被 痉 用 ， 所 以 属性 数量 既 可 能 增多 ， 也 可 


本 书 刻意 忽略 许多 很 少 使 用 的 CSS 属性 ( 以 及 至 今 仍 未 被 主流 浏览 各 支 持 的 属性 )， 这 些 
属性 只 会 市 来 不 必要 的 混乱 。 

相反 ， 本 书 仅 关 注 Web 设计 师 和 开发 人 员 当 前 第 用 的 CSS 属性 ， 特 别 是 与 网 格 布局 和 弹性 
盒 模型 相关 的 属性 。 


11 WE 
可 以 将 CSS 代码 存 为 单独 的 外 部 文件 ， 并 在 HTML 中 引用 ， 如 下 所 示 。 


«e ueque 
«head» 
«title» xkiti 44 m3h-/citle» 
«link rel="stylesheet" type-"text/css" href-"style.css"/» 


</head> 
sq oy 

style.css 中 的 CSS 样式 将 被 应 用 于 本 页 面 。 
«od 


Mates RI s 
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也 可 以 直接 在 HTML 中 编写 CSS 代码 ， 如 下 所 示 。 


ri types exis SS BM A Se E 


1.2 ”赋值 


可 以 用 以 下 代码 为 ID 是 box 的 HTML 元 素 进 行 属性 赋值 。 


box (property: value;] 


属性 值 因 属 性 而 异 ， 既 可 以 是 像素 、pt 、em 或 fr 等 单位 指定 的 空间 大 小 ， 也 可 以 是 红色 、 
蓝 色 、 黑 色 等 颜色 。 颜 色 还 可 以 用 十 六 进 制 格式 来 表示 ， 如 #00FF00, L rgb(r, g, b) 格 
式 表示 。 














有 些 属 性 值 专用 于 特定 的 属性 。 例 如 ，CSS 的 transform 属性 可 以 使 用 一 个 叫 作 rotate 
的 属性 值 ， 该 属性 值 表示 度数 ， 且 需要 在 度数 后 附 上 aeg， 如 下 所 示 。 














/* 将 该 元 素 按 顺 时 针 方 向 旋转 45 度 */ 
a00% wbranstorm* rotsebe(45deg» 


1.3 注释 


CSS 只 文 持 使 用 “ 块 注释 ”语法 来 创建 代码 内 的 注释 ， 即 通过 /* 注释 内 容 */ 的 形式 包 
误 注 释 。 以 下 是 一 些 例子 。 





/* 使 用 十 六 进 制 值 把 字体 闫 色 设 为 白色 */ 
Color: FERRARE; 


/* 使 用 十 六 进 制 缩写 值 把 字体 闫 色 设 为 白色 */ 
Ge 


/* 使 用 颜色 名 称 把 字体 颜色 设 为 白色 */ 


Color wie 


/* 使 用 RGB 值 把 字体 颜色 设 为 白色 */ 
color: rob(255, 255, 2595)? 


/* 使 用 CSS 变量 把 字体 颜色 设 为 身 色 */ 


color: var(--white-color); 
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还 可 以 用 注释 符号 包 囊 一 整 段 CSS 代码 ， 从 而 暂时 略 去 这 段 代 码 ， 以 备 不 时 之 需 。 


Jus 
content: "hello"; 
looruepc ues d c 
Colors E EEEEEES 

a 


CSS 不 推荐 // 行内 注释 格式 , 其 他 的 注释 格式 在 CSS ERA PAREINA, 只 会 向来 干扰 。 


1.4 赋值 方式 

我 们 使 用 property: value; 的 形式 为 HTML 元 素 设 置 背 景 图 片 、 颜 色 及 其 他 基本 属性 ， 
也 可 以 使 用 简写 形式 指定 单个 属性 的 多 个 属性 值 ， 
从 而 避免 元 余 。 在 简写 时 ， 一 般 用 空格 来 分 隔 多 个 属性 值 。 














property: value value value; 





近年 来 ，CSS 历经 很 大 的 升级 。 在 开始 用 示意 图 解释 CSS 属性 之 前 ， 先 来 了 解 CSS 是 如 何 
解释 属性 和 赋值 方式 的 。 


/* 最 常用 的 方式 */ 


property: value; 


/* 用 喜与 分 隔 属 性 值 */ 


property: value, value, value; 


/* 用 空格 分 隔 属性 值 */ 


property: value value value; 





涉及 大 小 的 属性 可 以 用 calo 关键 字 进 行 计 算 。 


property* calc(valuelpxl); 


/* TAT aa Ee pL */ 
property: calc(value[$] aA EOE 


/* 同样 可 以 进行 百分比 和 百分比 之 间 的 计算 */ 


property: calc(value[$] - value[$]); 


/* Ve */ 
property: calc(value[px] -» valuel[px]); 
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/* pxJ px */ 
propensa coge (Coe a el 


uS uy 
property. eadteuwvsbuelpx) c vetuepl 


/* px IE&VApx */ 
properbv.: cabtecvoltuelpx] v veltuetbps» 


ju exec EC ul 


property: Cale (valuelpex] ~ numoer) 


/* px 除 以 数值 */ 
property: Recke (ye lm ue 


J VA A 
property: calc(number / valuelpx|); 


最 后 一 个 示例 会 报错 。 这 是 因为 ， 在 使 用 calc 时 ， 不 能 用 数值 除 以 指定 的 像素 值 。 


1.5 CSS 变量 


可 以 使 用 CSS 变量 避免 重复 相同 的 值 。 


/* XSL*€-€*€ --default-color */ 
element í(--default-color: yellow;]) 


/* 定义 变量 --variable-name */ 
element í(--variable-name: 100px;])] 


/* 4&JH € € --default-color ik É BGIAÉ, */ 
ebLement i1backoround-colors: vart(--deraul:b-color)e€) 


/* ERRAN lOp */ 
element (width: var(--variable-name);] 


1.6 Sass/SCSS 








虽然 Sass/SCSS 超出 了 本 书 的 讨论 范畴 ， 但 我 还 是 要 回 进 阶 的 CSS 学习 者 推荐 它们 。 需 要 
注意 的 是 ，Sass/SCSS 在 浏览 右 中 无 法 做 到 “ 开 箱 即 用 "， 需 要 用 命令 行 安 装 Sass Err, J fE 
TE Web 服务 硕 上 局 用 它 。 
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Sas dB5OOCSES 
Sb: Í4EIl6A2E; 
maxing- colors 
backgrou- colors, mix (Sa, So, 30%)? 


} 


JS WWRUE—ZP2£ 2] Sass/SCSS, 但 前 提 是 要 对 本 书 所 述 的 标准 CSS 有 足够 的 了 解 。 


17 CSS 背后 的 理念 

层 又 样式 表 ( Cascading Style Sheet, CSS) 这 个 名 称 是 有 来 由 的 。 想 象 瀑布 落下 的 激流 冲 
击 春 石 头 ， 石 头 一 层 一 层 地 被 漫 湿 。 与 之 类 似 ， 每 个 子 元 又 的 CSS 样式 都 继承 于 已 应 用 在 其 父 
元 素 上 的 样式 。 

文档 对 象 模型 ( Document Object Model, DOM) 的 层级 体现 了 网 站 结构 ， 如 图 1 所 示 。 
CSS 样式 会 逐 层 “渗透 ”DOM 树 ， 这 个 神奇 的 过 程 由 CSS 选择 需 控 制 。 








<a> <a> <a> 





图 1 CSS 选择 需 协 助 遍历 文档 对 象 模型 
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让 我 们 通过 图 2 展示 的 这 个 简单 的 网 站 结构 来 理解 CSS. 的 基本 概念 。 


header 


article 


footer 


Privacy Policy. 





2018 Copyright. 
«body» X zz 


«span» 
图 2 SUE UE I-— EUR. 


CSS 就 像 一 把 锯 子 ， 帮 助 我 们 选择 想 要 的 元 素来 应 用 具体 的 样式 





如 末 给 <body> 标签 应 用 震 色 育 景 ， 那 么 通 套 在 该 标签 内 的 所 有 元 系 都 将 日 动 继承 轩 色 
Hom 


booy backgrounds black; colors vaNe ) 





BERASE U"ESEU. 使 以 下 所 有 HTML 元 素 都 继承 “在 黑色 育 景 下 显示 日 
色 文 本 ”的 样式 。 


«body» 





uec usce n he de 


«article-Amazing article.«/article- 
«tooter-» 


Privacy Pod 


<Bpan>2018 Copyrigat spon 
</footer> 


oy 


如 采 想 单独 显示 页 脚 并 以 红色 突出 显示 Privacy Policy.， 以 绿色 突出 显示 2018 Copyright., 
那么 可 以 应 用 以 下 CSS 命令 进一步 扩展 层 闭 原则 


boy Toackgrouwacis black; colors wates ) 
Ttoober (colors reci) 


footer span (color: green;j 


tA, footer 和 span 之 间 有 一 个 空格 。 在 CSS 中 ， 


空格 是 CSS 选择 融 符 号 ， 意 指 “ 在 
前 面 指 定 的 标签 内 选择 ”。 在 本 示例 中 ， 前 面 指 


定 的 标签 就 是 footer. 


110 常用 项 | 7 


1.8 CSS 选择 希 


/* 选择 ID 为 ia 的 单个 元 素 */ 
Bid () 


/* ikiRX £73 classi fMJEDRUE */ 
Classi {í} 


有 


#parent Classl {} 


1.9 ”宽松 的 环境 


与 HTML 相似 ，CSS 是 十 分 宽容 的 语言 ， 因 为 它 是 专 为 网 站 不 能 保证 被 完全 加 载 的 环境 设 
计 的 。 如 末代 码 编写 错误 ， 或 者 网 页 因 某 种 原因 没有 被 完全 加 载 ， 那 么 CSS 代码 会 降级 适应 ， 
从 而 最 大 程度 地 显示 样式 。 





1.10 HAN 


以 下 是 最 常见 的 CSS 属性 和 属性 值 组 合 








7 
color: &FFFFFF; 


/* TX ARIAE */ 
background-color: 14000000; 


/* ANLAGE */ 
order: c0pxssodsd bibe 


/* dj&P4i7 Arial */ 
tont-family: Arial, sans-serif; 


/* 设置 字体 大 小 */ 


font-size: 16px; 


/* IARA */ 
pacciings 320x; 


/* 设置 外 边 距 */ 
margins 16px; 
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1.41 简写 属性 
以 下 例子 通过 3 个 属性 来 为 HTML 元 素 的 背景 图 片 设置 样式 。 
backgroundcceolor: 0000005 


background-image: url("image.jpg"); 
background-repeat: no-repeat; 





可 以 通过 简写 属性 background 实现 一 样 的 效 末 〈 TET ARS BST )， 如 下 所 示 。 


background: 4000000 url("image.jpg") no-repeat; 





PATE TE Jap RICE RAR J d. HEA f8] E X. 





CSS 中 的 伪 类 选择 器 就 是 前 面 囊 有 冒号 ( : ) 的 选择 名 。 举 例 来 说 ， 伪 类 选择 圳 :first- 
child 和 :last-child 可 以 分 别 从 父 元 素 中 选择 第 一 个 和 最 后 一 个 子 元 素 。 


另 一 个 例子 是 :nth-childa， 它 可 以 用 于 选择 元 素 列 表 或 HTML 表格 中 属于 同一 行 或 同一 
列 的 元 素 。 





图 3~ 图 6 展示 了 伪 类 选择 各 的 用 法 示例 。 


[——Mi————— 


图 3 table tr td:nth-child(2) 


pu 


lk 4 table tr:nth-child(2) td:nth-child(2) 


———— 


Kl 5 table Er:nth-child(2) 


= 


lKl6 table tr:last-child tqrlast-ehilg 
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:nth-child 的 使 用 规则 同样 适用 于 其 他 具有 骸 僚 结构 的 元 素 组 (如 ul 和 1i)， 以 及 父 元 
素 和 子 元 素 的 任意 组 合 。 

如 果 想 选择 页 面 中 或 茶 些 父 元 素 中 的 所 有 元 素 ,该 怎么 办 呢 ? 这 也 完全 没有 问题 ! Ey (>) 
选择 融会 选择 父 元 素 中 的 所 有 子 元 素 ， 如 图 7 所 示 。 





图 7 table * 


需要 注意 的 是 ， 空 格 本 里 就 是 选择 大 的 一 部 分 ， 用 以 从 父 元 系 获 取 其 中 元 又 的 层次 结构 。 
后 文 还 会 通过 示意 图 介绍 伪 元 素 选 择 佑 :before 和 :after， 并 解释 它们 与 HTML TRA 





每 个 HTML 元 素 背 后 的 基本 结构 都 是 盒 模 型 。 盒 模型 通常 由 内 容 区 (content area ) 及 其 周 
BAJA (padding )、 边 框 (border )、 外 边 距 (margin) 构成 。 图 8 是 盒 模型 示例 。 


外 边 距 











TRANSFORM-ORIGIN: 50% 50% 
< 默认 > 


图 8 第 一 眼看 上 去 只 是 常规 的 HTML XEJÉ 





盒 模 型 最 重要 的 一 点 是 ， 它 的 box-sizing 属性 默认 人 被 设置 为 content-box。 在 我 看 来 ， 
这 和 多少 有 些 不 幸 ， 因 为 这 意味 着 添加 内 边 距 、 边 框 或 外 边 距 会 改变 块 区 域 的 物理 尺寸 。 





在 图 9 中 ， 元 素 的 height 属性 并 没有 改变 ， 它 的 物理 尺寸 却 改 变 了 ， 这 就 是 将 box-sizing 
分 别 设 置 为 content-box、 padding-box, border-box 的 区 别 。 






外 边 距 


height: 200px 
height: 200px 


CONTENT-BOX PADDING-BOX BORDER-BOX 





图 9 元 素 的 height 属性 并 没有 改变 ， 它 的 物理 尺寸 却 改变 了 
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之 所 以 没有 margin-box， 是 因为 外 边 距 本 壬 就 是 指 围绕 内 容 的 空白 区 域 。 





在 图 10 中 ， 当 使 用 默认 的 content-box 模型 时 ， 硅 给 边框 的 四 边 各 增加 1 38, width 
和 height 就 都 会 增加 2 像素 。 


302 x 102 
SS Is Awesome 
border: lpx solid gray; 
width: 300px; 
height: 100px; 


background: #eee; 
box-sizing: 





图 10 ”大 使 用 默认 的 content-pox 模型 ， 边 框 会 影响 元 素 尺 十 








在 图 11 中 ,设置 边框 和 内 边 踊 之 后 ， 客 度 变 为 334 像素 ， 高 度 变 为 034 f&zR, HIER 
度 都 增加 了 34 像素 (1x2+16x2=34)。 


.334 x 134 





CSS Is Awesome border: lpx solid gray; 


width: 300px; 
height: 100px; 
background:  $&eee; 
box-sizing: 

padding: l6px; 











图 11 HBERERWAHJcontent-box 模型 ， 内 边 距 会 影响 元 素 尺 十 











在 图 12 中 ，box-sizing 被 设置 为 badqdqing-box。 元 和 际 尺 寸 没 有 改变 ， 但 内 容 区 有 了 内 
WIE, 


300 x 100 
CSS border: lpx solid gray; 
Is Awesome width: 300px; 
height: 100px; 


background:  $4eee; 
box-sizing: 
padding: l6px; 





借助 padding-box 在 盒 中 添加 内 边 距 
图 12 ” 知 使 用 padqding-box 模型 ， 内 边 距 不 会 影响 元 素 尺 寸 
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在 图 13 中 ， 把 边框 的 原始 值 border: 1px solid gray; PUE border: 16px;, BILE 
padding: 16px;， 现 在 元 素 每 条 边 都 额外 增加 了 32 像素 , 因此 高 度 和 宽度 都 各 增加 了 64 像素 。 


364 x 164 





T A border: lpx solid gray; 
CSS width: 300px; 
3 WeSO m e height: 100px; 


background:  $eee; 
box-sizing: 

padding: l6px; 
border: l6px; 





图 13 ”结合 内 边 距 和 边框 


border-box 把 border 和 padding 置 人 盒 中 ,同时 保持 元 素 的 原始 尺寸 不 变 , 如 图 14 所 示 。 
当 需 要 确保 元 素 尺寸 不 受 边框 或 内 边 距 影响 时 ，border-pbox 就 能 派 上 用 场 。 


300 x 100 


box-sizing: border-box; - 
将 border fH padding 都 置 入 
CSS Is Awesome 宽 300 像素 、 高 100 像素 的 盒 中 


图 14 border-box 不 会 改变 元 素 的 原始 尺寸 


图 15 和 图 16 是 更 多 示例 。 


CSS Is Awesome 





图 15 Css 中 没有 margin-box， 因 为 外 边 距 本 和 号 就 是 指 围绕 内 容 的 空白 区 域 








内 容 :after :before AC p 
图 16 HTML 元 系 背 后 的 东西 远 比 我 们 看 到 的 要 多 


在 图 17 中 ，:before AFI :after 元 素 都 是 HTML 元 素 的 一 部 分 ， 可 以 通过 应 用 position: 
absolute; 在 不 创建 任何 新 元 素 的 情况 下 编排 它们 。 





#container2:before { #container2:after { 
content: ":before"; content: ":after"; 
background: white; background: yellow; 
border: 10px solid #3586FF; border: 10px solid orange; 
width: 130px; " left: 150px; 

J 


图 17 :before JCF :after 元 素 





Er 
[D 
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用 完 父 元 素 的 宽度 之 前 都 会 排列 在 同一 行 ， 如 图 18 所 示 。 


通常 情况 FT | 一 个 行内 元 素 | 另 一 个 行内 元 素 


不 管内 容 的 宽度 如 何 





部 会 独占 | | 


display: block; display: inline; 








图 18 position: relative; 


display: inline-block; 可 以 提供 两 全 其 美的 解决 方 宁 。 在 这 种 情况 下 ， 如 果 行 内 元 
素 的 高 度 不 同 ， 就 会 有 如 图 19 所 示 的 换行 效果 。 


J ELE 
SENSE m 行内 元 素 











display: inline-block; display: inline-block; 


图 19 display: inline-block; 


可 以 将 position: absolute; 5E top Ñi left zk top Alright 结合 使 用 , 如 图 20 所 示 。 
设 为 bosition: absolute; 的 元 素 可 以 用 任意 一 角 作 为 坐标 系 原 点 。 
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— ee 











top: 0 left: 0 top:0 right: 0 




















图 20 将 position: absolute; 5 top Ñi left I top FI right 结合 使 用 


同 理 ， 可 以 将 position: absolute; Ej bottom 和 left gk bottom 和 rigo oe 
如 图 21 所 示 。 


bottom: 0 left: 0 bottom: 0 right: 0 

















图 21 将 position: absolute; 与 bottom 和 1left 或 bottom Fi right 结合 使 用 





position: fixed; 与 position: absolute; 的 效果 类 似 ， 只 不 过 滚动 页 面 不 会 影 啊 
元 素 在 视 口 中 的 位 置 ， 如 图 22 和 图 23 所 示 。 








top: 0 left: 0 top: O right: 0 











图 22 position: fixed; 

















bottom: O left: 0 m bottom: 0 right: 0 R 


图 23 原点 可 以 是 元 素 的 任意 一 角 ， 具 体 取 决 于 所 使 用 的 属性 值 对 (top fll left, top Fright, bottom 
和 left, bottom FA right ) 














字体 和 文本 


本 书 不 会 过 多 地 讲解 字体 和 文本 的 使 用 方法 ， 这 是 因为 它们 无 处 不 在 。 不 管 是 浏览 网 页 ， 
还 是 使 用 社交 网 络 ， 你 都 会 看 到 各 种 字体 和 文本 。 在 CSS 中 ， 与 字体 和 文本 有 关 的 主要 属性 有 


font-family, font-size, color, font-weight ( normal 或 bold ), font-style ( 例如 





italic). text-decoration (VIU underline EX none ) 


图 24 — 图 27 给 出 了 一 些 字 体 示 例 。 


了 


Enter your email address. 


图 24 font-family: "CMU Classical Serif"; 的 效果 ， 这 是 我 经 常 使 用 的 字体 








了 


Enter vour email address. 


图 25 font-family: "CMU Bright"; 的 效果 ， 这 是 CMU 字 族 的 一 种 变 体 ， 也 很 美观 


cx] 


"Enter vour email address. 


图 26 font-family: Arial, sans-serif; 的 效果 ， 这 是 谷歌 的 最 爱 
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cd 


»- (€ 


\ 


nter your email address. 


E27 font-family: Verdana, sans-serif; 





需要 注意 的 是 ， 图 26 和 图 27 的 例子 使 用 无 衬 线 体 (sans-serif) 作为 后 备 字 体 。 可 以 指定 
更 多 的 后 备 字 体 ,各 字体 以 逗号 分 隔 。 如果 列 表 中 的 第 一 个 字体 不 可 用 或 当前 的 浏览 帮 无 法 泻 染 ， 
CSS 就 会 跳 转 到 下 一 个 可 用 字体 。 如 果 其 他 字体 都 不 可 用 ， 那 么 将 使 用 Times New Roman， 如 
图 28 所 示 。 














c 


»- ( 


nter vour email address. 


图 28 Times New Roman 是 浏览 器 的 默认 字体 





可 以 通过 设置 font-size 属性 来 改变 字体 的 大 小 ， 默 认 值 是 medqium， 对 应 16px， 如 图 
29 所 示 。 


了 
Enter your email address. Arial 12px 
Y 
| . 
Enter your email address Arial 16px 
Y 


IEnter vour email address Arial 20px 


图 29 字体 的 默认 大 小 为 16px 


字体 大 小 可 以 使 用 pt、px、em、s% 等 单位 指定 。 设 置 为 100% 和 设置 为 12pt、16px 或 
lem 的 效果 是 相同 的 。 在 知道 这 一 点 后 ， 便 可 以 推断 出 比 默 认 值 更 大 或 更 小 的 字体 大 小 值 。 图 
30 给 出 了 一 些 例子 。 





pt 
6pt 
Tpt 

T 5pt 
8pt 
9pt 
10pt 
10.5pt 
11pt 
12pt 
13pt 
13.5pt 
14pt 
14.5pt 
15pt 
16pt 
17pt 
18pt 


20pt 


22pt 


24pt 


26pt 


2Tpt 


28pt 


29pt 


30pt 


32pt 


34pt 


36pt 


px 
8px 

9px 

10px 
11px 
12px 
13px 
14px 
15px 
16px 
17px 
18px 
19px 
20px 
21px 
22px 
23px 
24px 


26px 


29px 


32px 


35px 


36px 


37px 


38px 


40px 


42px 


45px 


48px 


em 


0.5em 
0.55em 
0.625em 
0.7em 
0.75em 
0.8em 
0.875em 
0.95em 
1em 
1.05em 
1.125em 
1.2em 
1.25em 
1.3em 
1.4em 
1.45em 


1.5em 


1.6em 


1.8em 


2em 


2.2em 


2.25em 


2.3em 


2.35em 


2.45em 


2.55em 


2./5em 


3em 


oo 
50% 
55% 
62.5% 
70% 
75% 
80% 
87.5% 
95% 
100% 
105% 
112.5% 
120% 
125% 
130% 
140% 
145% 
150% 


160% 


180% 


200% 


220% 


225% 


230% 


235% 


245% 


255% 


275% 


300% 


size 


x-small 


small 


medium 


large 


x-large 


xx-large 


默认 为 无 衬 线 体 


Samge er 
Sample text 

Sample text 

Sample text 
Sample text 
Sample text 
Sample text 
Sample text 
Sample text 
Sample text 
Sample text 


Sample text 
Sample text 
Sample text 
Sample text 
Sample text 


Sample text 


Sample text 


Sample text 


Sample text 
Sample text 
Sample text 


Sample text 


Sample text 


Sample text 


Sample text 


Sample text 


sample text 


图 30 字体 大 小 可 以 使 用 ot. px, em, $ 等 单位 指定 
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100% = 16px = medium 
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font-weight 属性 用 于 定义 字体 的 粗细 程度 ， 如 图 31 所 示 。 


font-weight | Raleway 


100 | [AIN 
200 | Extra-Light 
300 | Light 


400 | Regular 
500 | Medium 
600 | Semi-Bold 


700 | Bold 
800 | Extra-Bold 
o00 | Black 


图 31 对 谷歌 字体 库 提供 的 Raleway 字体 使 用 font-weight 目 定 义 字 体 的 粗细 


5.1 文本 对 章 


在 CSS 中 ， 一 个 基本 操作 就 是 在 HTML 元 系 中 对 齐 文本 。 图 32 ~ 图 34 展示 了 text-align 
属性 的 效 末 。 








CSS Is Awesome. XERE (RU) 


B| 32 text-align: left; 是 默认 设置 


CSS Is Awesome. 文本 居中 


图 33 text-align: center; 
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CSS Is Awesome. 文本 居 右 





R 34 text-align: right; 


5.2. 控制 最 后 一 行 的 对 齐 万 式 


text-align-last 和 text-align 类 似 ， 只 不 过 它 仅 作用 于 段落 文本 的 最 后 一 行 。 图 35 ~ 
图 37 是 一 些 例子 。 


CSS Is Awesome, that much we know. However, we need to 

rite a bit more text here, in order to demonstrate how the 最 后 一 行 居 左 (默认 ) 
CSS property text-align-last works, justifying only the last 
line of text in a paragraph. 





E35 text-align-lasts left; 


CSS Is Awesome, that much we know. However, we need to 
rite a bit more text here, in order to demonstrate how the 
CSS property text-align-last works, justifying only the last 
line of text in a paragraph. 


最 后 一 行 大 中 





图 36 text-align-last: center; 


CSS Is Awesome, that much we know. However, we need to 
rite a bit more text here, in order to demonstrate how the 


最 后 一 行 居 布 


CSS property text-align-last works, justifying only the last 
line of text in a paragraph. 





R37 ctext-align-last: right; 


jp writing-mode 设置 为 vertical-1lr Ff, 使 用 text-combine-upright: all; 可 
以 实现 如 图 38 所 示 的 效果 。 
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- «span style — " 
—— — — — text- combine-upright: all >2000</span> 


«span style — " 
text-combine-upright: all "»Is« /span» 








writing-mode: vertical-lr; 


图 38 text-combine-upright: all; 


5.9. XN th 


当 文 本 般 套 在 父 元 素 中 时 ， 可 以 通过 给 父 元 素 应 用 overflow: scroll; 来 为 文本 添加 深 
动 条 以 防止 洲 出 ， 如 图 39 所 示 。 











You should go and grab a cup | 
nf coffee 


父 元 素 : overflow: scroll; 
子 元 素 : position: absolute: 


图 39 为 文本 添加 滚动 条 


更 多 的 示例 效 末 如 图 40~ 图 43 所 示 。 
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You should go and grab a cup 


父 元 素 : overflow: auto; height: 24px; 一 


K| 40 overflow: auto; height: 24px; 


You should go and grab a cup 
of coffee. 


父 元 素 : overflow: auto; height: 34px; 


图 41 overflow: auto; height: 34px; 


You should go and grab a cup 


父 元 素 : overflow: hidden; 
子 元 素 : position: absolute; 


图 42 同时 应 用 overflow: hidden; 和 position: absolute; 


CSS Is CSS Is 


Axxracatrv 


Axxraca rv 


overflow: hidden; 





overflow: hidden; 


图 43 overflow: hidden; 的 经 典 实例 ， 你 也 许 应 该 去 喝 一 杯 咖 啡 了 
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图 44 展示 了 一 些 以 空格 分 隔 的 属性 值 ， 这 是 为 单个 属性 指定 多 个 属性 值 的 常用 方法 。 可 以 
使 用 text-decoration 属性 在 文本 的 顶部 和 底部 添加 线条 。 虽 然 这 在 布局 设计 中 并 不 和 常见， 
但 不 妨 了 解 一 下 ， 而 且 所 有 浏览 融 都 文 持 这 个 属性 。 


CSS [s Awesome. 
X — 
CSS [s Awesome. 


CSS [s Awesome. 





CSS [s Awesome. 


CSS [s Awesome. 


overline 
line-through 


underline 


underline overline 


underline overline dotted red 


underline overline wavy blue 


underline overline double green 


图 44 更 多 字体 效果 


5.4 ”跨越 下 划 线 


text-decoration-skip-ink 属性 可 用 于 在 下 划 线 上 车 加 文本 ， 如 图 45 所 示 。 对 于 页 面 
标题 或 使 用 大 字体 目 带 下 划 线 的 文本 来 说 ， 这 样 做 有 助 于 提升 视觉 完整 性 。 
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You should go and grab a cup of coffee. 


text-decoration: underline solid blue ; 


text-decoration-skip-ink: 


You should go and grab a cup of coffee. 


text-decoration: underline solid blue ; 


text-decoration-skip-ink: auto |; 


图 45 text-decoration-skip-ink 的 效果 


5.5 ”文本 演 染 


X 7k ig Zt Jg l'E cexct-rendering 的 4 种 设置 一 一 auto、optimizeSpeed、optimize- 
Legibility、geometricPrecision 一 一 似乎 没有 明显 的 差异 ， 如 图 46 所 示 。 不 过 ， 通 常 认 
为 使 用 optimizeSpeed 可 以 提高 大 段 文 本 在 一 些 浏览 硕 中 的 泻 染 速度 。 


CSS [s Awesome. 


text-rendering: auto; 


CSS [s Awesome. 


text-rendering: optimizeSpeed; 











K| 46  text-rendering 的 4 种 表现 形式 


26 | 5 字体 和 文本 


CSS Is Awesome, 


text-rendering: optimizeLegibility; 


CSS Is Awesome. 


text-rendering: geometricPrecision; 


图 46 (52) 





当 设 为 auto 时 ,浏览 器 会 自动 判断 何 时 从 泻 染 速度 .清晰 度 .几何 精度 等 方面 优化 泻 染 效果 ， 
optimizeSpeed,optimizeLegibility,geometricPrecision 则 分 别 从 演 染 速度 、 清 晰 度 、 


几何 精度 进行 优化 。 














5.6 文本 缩 进 
文本 缩 进 属性 text-indent 用 于 调整 文本 的 对 齐 基点 。 在 某 些 情况 下 ,特别 是 在 新 闻 网 
站 或 图 书 编辑 软件 中 ， 它 可 能 会 派 上 用 场 。 图 47 和 图 48 是 两 个 例子 。 


You should go and grab a cup of 
coffee. 


图 47 text-indent: 100px; 


-100px 


You should go and grab a cup of coffee. 


R| 48 text-indent: -100px; 
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5.7 文本 万 同 


text-orientation 属性 控制 文本 的 排列 方向 ， 和 尝 与 writing-mode 属性 一 起 使 用 。 有 些 语 
言 的 文本 排列 方向 是 从 右 到 左 ， 有 些 是 从 上 到 下 。 在 呈现 这 些 语言 的 文本 时 ，text-orientation 
属性 就 能 派 上 用 场 。 图 49 和 图 50 是 两 个 例子 。 
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图 49 text-orientation: mixed; 图 50 text-orientation: upright; 





Tb writing-mode: vertical-rl; (从 右 到 左 ) 或 writing-mode: vertical-lr; 
(MEIA ) 一 起 使 用 时 ，text-orientation 属性 能 够 灵活 地 对 齐 文本 ， 如 图 51 和 图 52 
Ms 
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H Sa 
o S = o` 
Un Un 
o 3 3 o 
= c c S 
iE —. —'Oo 
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0 e 
writing-mode: vertical-rl; writing-mode: vertical-lr; 


text-orientation: use-glyph-orientation; X text-orientation: use-glyph-orientation; 


图 51 结合 使 用 writing-mode 属性 和 text-orientation 属性 


CCcCggST Ysggcecoe 
ouroho ohoruo 
fpa o u u 0 apf 
f bau u a b f 
eo nl |n oe 
efadd ddafe 
writing-mode: vertical-rl; writing-mode: vertical-lr; 
text-orientation: upright; text-orientation: upright; 


K| 52. writing-moae 的 属性 值 与 图 51 相同 ， 只 不 过 将 text-orientation 属性 设置 为 upright 
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把 行 高 设置 为 元 素 的 高 度 ， 可 以 在 任何 元 系 中 垂 理 居中 文本 ， 如 网 53 所 示 。 文 本 的 高 度 
(实际 字母 的 高 度 ) 和 行 高 并 不 总 是 相同 的 。 


Y <body> 或 其 他 父 容器 ， 比 如 <div> 





line-height: 60px ; 








图 53 文本 的 高 度 和 行 高 不 同 


图 54~ 图 56 给 出 了 更 多 与 文本 显示 相关 的 示例 。 


开局 连 字 关闭 连 字 连 字 效果 


A^ 23855 mw 过 E" um A^ sd n dn um am Mi am -f= e TT/ | 
A ffi mative AN ffi rmative DAE. AN. NB ND NE 
d. A. 及 L L a Ws y A A. A. die dE JA. JL WV, Ws "MEA T 
FFFIFLFELIAN?P 
font-family: "chaparral-pro": font-family: "chaparral-pro": N& NITO (Qu QD CE 
font-feature-settings: "liga" 1; font-feature-settings: "liga" 0; IT TW'T^ 7 
font-feature-settings: "liga" on; font-feature-settings: "liga" off; EISE 
Th UB UDLLIPIR 
: ae æ éky & ee fb fh f 
\ffir Mfirmative Dacis 
j lj j 多 Ü Y 
| | | | fh 的 fE ffr fft ffy gg 
font-family: "Fira Sans"; font-family: "Fira Sans"; gi gy ggy ip it ky oe œ 
font-feature-settings: "liga" 1; font-feature-settings: "liga" D; fi 
font-feature-settings: "liga" on; font-feature-settings: "liga" off; py sp s fs $t tw ty tt tty 








K 54 JTESEHJUEEE.: font-feature-settings: "liga" 1; 或 者 font-feature-settings: "liga" on; 


Italic Bold Italic Bold Regular 


/ | d 
italic bold bold regular oblique 
italic 


图 55 通过 属性 font-style 和 font-weight 实现 常见 的 字体 效果 ( 斜体 和 加 粗 ) 
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text-align: center; 
height: 40px; 
.] — line-height: 40px; 











对 于 按钮 中 的 文本 ， 默 认 居中 并 设置 行 高 有 助 于 


的 <span> 风 格 效 果 不 佳 精确 对 齐 文本 





图 56 可 以 使 用 属性 text-align 和 1ine-height 使 按钮 中 的 文本 居中 


5.8 ”文字 阴影 


可 以 使 用 text-shadow 属性 给 文本 添加 阴影 ， 图 57 给 出 了 一 些 示 例 。 





CSS Is Awesome. 


text-shadow: Opx Opx Opx #0000FF ; 


CSS Is Awesome. 


text-shadow: Opx Opx 1px #0000FF ; 


CSS Is Awesome. 


text-shadow: Opx Opx 2px #0000FF ; 


CSS Is Awesome. 


text-shadow: Opx Opx 3px #0000FF ; 





K| 57 text-shadow 属性 用 法 示例 
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CSS Is Awesome. 


text-shadow: Opx Opx 4px #0000FF ; 


CSS Is Awesome. 


text-shadow: 2px 2px 4px #0000FF ; 


CSS. Is Awesome. 


text-shadow: 3px 3px 4px #0000FF ; 


CSS, Is, Awesome. 
text-shadow: 5px 5px 4px #0000FF ; 
图 $7 (92) 


text-shadow 属性 的 参数 包括 x 轴 上 的 偏 移 量 、y 轴 上 的 偏 移 量 、 模 糊 半径 、 阴 影 颜色 ， 
如 图 58 所 示 。 


text-shadow: 5px 5px 3px #0000FF; 








阴影 颜色 


图 58 text-shadow 属性 的 参数 


5.9 其 他 效果 


CSS 也 可 以 操控 SVG。 不 过 ， 本 书 不 会 深入 讨论 SVG,， 因 为 有 关 它 的 内 容 可 以 单独 写 一 本 书 。 
图 59 简单 地 展示 了 如 何 创建 旋 转 的 SVG 文本 。 
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Stext s 


Wesom 


旋转 10 度 一 一 


e, that much W. 








«svg width = "380" 


height — "120" 
style = "border:1px solid gray;"» 
ctéxtx = "10" 





y — "30" 
stroke = "black" 
fill = "white" 
transform = "rotate(10)" 





style = "font-size: 30px; stroke-width: 1px; text-anchor: left;"> 
CSS Is Awesome, that much we know. However, we need to write a bit more 
text here, in order to demonstrate how SVG rotations work. 
</text> 
</svg> 


图 59 ”使 用 CSS 旋转 SVG 文本 








通过 text-anchor 属性 ， 可 以 设置 文本 的 中 心 点 ， 使 文本 绕 着 该 点 旋转 ， 如 图 60 所 示 。 





图 60 text-anchor: middle; 
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在 将 text-anchor 设置 为 end， 旋 转 中 心 点 将 是 文本 块 的 最 末端 ， 如 图 61 所 示 。 


Orki 


图 6l text-anchor: end; 





次 出 


本 章 内 容 较 杂 ， 主 要 涉及 圆 角 边框 、 外 边 距 、z-indqex、 阴 影 效 果 ， 还 会 介绍 如 何 利用 游 
出 效果 创作 不 规则 的 图 案 。 


border-radius 属性 的 作用 是 为 正方 形 或 定形 的 HTML 元 素 添 加 圆 角 边框 ， 如 图 62 所 示 。 





图 62 border-radius 示例 


使 用 :hover 伪 类 选择 需 ， 可 以 设置 当 鼠 标 悬 停 在 元 素 上 或 进入 元 系 的 区 域 时 的 效果 ， 如 
图 63 所 示 。 





图 63 使 用 :hover 伪 类 选择 骨 设 置 悬 停 效 果 


sN, 
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当 子 元 素 使 用 position: absolute; 排列 时 ， 必 须 显 式 地 将 父 容 器 设置 为 bosition: 


relative; 或 position: absolute;， 如 图 64 所 示 。 


x 
e 
S 
N 
i 
£ 
D 
D 
< 


width: 500px 





图 64 -o5z 8 B position: absolute; 


只 需 把 元 素 的 display 属性 设置 为 block， 即 可 使 用 margin: auto; 来 水 平 排列 


它 。margin-top 属性 可 以 让 元 素 偏离 上 边界 一 定 的 距离 ， 如 图 65 所 示 。 同 样 ， 也 可 以 使 用 


margin-left, margin-right, margin-bottom 达到 类 似 的 效果 。 


display: block; 


margin: auto; 





图 65 margin-top 属性 可 以 让 元 素 偏 离 上 边界 一 定 的 距离 


在 主流 浏览 器 中 ，z-index 属性 使 用 0 ~ 2 147 483 647 的 数值 来 确定 元 素 绘制 顺序 。 在 
Safari 3 中， 最 大 的 z-index 值 是 16 777 271。 图 66 和 图 67 给 出 了 两 个 示例 。 
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图 66 元素 默认 的 z-order 对 应 HTML 文档 流 中 的 排列 顺序 





图 67 ”改变 元 系 的 z-ordqer， 可 以 改变 展现 顺序 ， 使 某 个 元 素 脱 颖 而 出 


box-shadow 属性 用 于 在 元 素 周 围 添 加 阴影 效果 。 它 接受 与 text-shadqow 相同 的 参数 ， 
例如 图 68 中 的 box-shadow: 0 0 10px $000; (参数 分 别 对 应 阴影 的 x 轴 偏 移 量 、y 轴 偏 
移 量 、 半 径 、 颜 色 )。 


box-shadow: 0 0 10px 7/000; 





图 68 box-shadow 示例 


box-radius 属性 可 以 在 x HA y 轴 上 控制 边 角 曲 线 的 半径 ， 如 图 69 所 示 。 
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box-shadow: 5px 5px 10px 77000; 





图 69 box-radius 示例 





可 以 在 box-shadow 属性 中 使 用 明亮 的 颜色 营造 出 围绕 HTML 元 素 的 发 光 效 果 ， 如 图 70 


De 
box-shadow: 0 0 10px #FFF; 


图 70 在 box-shadow 属性 中 使 用 明亮 的 颜色 营造 出 发 光 效 果 





图 71 展示 了 一 个 块 级 元 素 。 


height: 40px; 


CSS Is Awesome 





display: block; 


图 71 块 级 元 素 示例 


当 元 系 的 宽度 小 于 其 中 文本 的 宽度 时 ， 文 本 会 被 自动 挤 压 到 下 一 行 。 即 使 下 一 行 在 元 又 边 
界 以 外 ， 也 会 如 此 ， 如 图 72 所 示 。 
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line-height: | (SS | S |H font-size: 25px; 


Awesome 


图 72 Awesome 被 挤 压 到 下 一 行 








让 我 们 进一步 分 析 图 72 中 的 情形 ,文本 的 实际 融 度 是 27px, 比 原先 设置 的 25px 多 出 2 像 系 。 





line-height 的 属性 值 可 以 延伸 到 内 容 区 外 ， 如 图 73 所 示 。 


width: 180px; border: 10px solid silver; 
height: 40px; 


line-height: 50px; -A-J ] 一 中 font-size: 25px; 


《实际 高 度 是 27px) 








display: block; 


K| 73 ” 块 级 元 素 示例 的 具体 参数 





如 图 74 所 示 ，Awesome 这 个 单词 跳 到 了 下 一 行 。 除 此 之 外 还 需 注 意 ， 即 便 某 个 单词 的 宽 
较 长 ， 它 也 不 会 折 行 。 换 名 话说 ，overflow 的 属性 值 默认 为 visible, 


| 
width: 80px; | 


height: 40px; 


----|— font-size: 25px; 
(实际 高 度 是 27px) 


l 一 一 一 单词 本 身 不 会 折 行 


图 74 Awesome 被 挤 压 到 下 一 行 


line-height: 50px; 











度 
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通过 将 溢出 属性 overflow 的 值 设 置 为 hidqqen， 可 以 抹 去 洲 出 容 融 之 外 的 内 容 ， 这 甚至 
对 圆 形 元 又 也 是 有 效 的 ， 如 图 75 所 示 。 





图 75 ”针对 圆 形 元 素 应 用 overflow: hidden; 








如 于 在 一 个 圆 图 内 隐藏 其 他 的 圆 形 元 素 ， 便 可 以 创造 出 一 些 有 趣 的 图 案 ， 如 网 76 所 示 。 





图 76 利用 溢出 效 末 创造 有 趣 的 图 案 
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针对 多 个 元 素 应 用 overflow: hidgden;， 可 以 创造 出 不 规则 形状 ， 如 图 77 和 图 78 所 示 。 


border: 4px solid gray; 

border-radius: 1000px; 

position: absolute; 

top: -32px; 

left: 5Opx; 

width: 150px; 

height: 50px; 

overflow: hidden; 

position: absolute; 
top: 35px; 
left: 250px; 
width: 350px; 
height: 50px; 
border: 4px solid gray; 
border-radius: 1000px; 


position: absolute; 
top: 98px; 

left: 50px; 

width: 150px; 

height: 50px; 

border: 4px solid gray; 
border-radius: 1000px; 


图 77 Mg SCR epe d LUE A 





图 78 除了 把 父 容 融 的 background KEAN gray, HWER FIAM background 设置 为 white 之 外 ， 
本 例 与 上 例 基本 相同 


利用 本 章 所 介绍 的 知识 ， 你 可 以 充分 发 挥 目 己 的 想象 力 ， 创 造 出 有 趣 的 图 案 。 本 书 最 后 将 
给 出 使 用 CSS 绘制 汽车 图 案 的 完整 示例 。 
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可 以 通过 CSS 属性 设置 HTML 元 素 在 屏幕 上 的 位 置 。 本 章 将 通过 示意 图 和 和 常见 用 例 展示 CSS 
属性 对 HTML 元 素 的 影响 。 





display 属性 可 以 取 以 下 的 值 来 定义 元 素 的 位 置 : ijnline、plock、inline-pblock。 此 外 ， 
还 可 以 使 用 float 属性 。 


B| 79 展示 了 aisplav: inline; 的 效果 ,这 是 <span>、<b>、<i> 等 HTML 标签 的 默认 值 。 
这 些 HTML 标签 用 于 在 宽度 未 知 的 父 容 需 中 显示 文本 。 


abicdefg -ee — 


足够 让 行内 元 素 换 行 显示 的 文字 。 








行内 元 素 





图 79 display: inline; 





在 图 79 中 ， 每 个 元 素 被 生 接 放置 在 前 一 个 元 系 的 有 侧 ， 这 是 文本 排版 的 不 二 选项 。 
请 注意 ， 过 长 的 行内 元 素 会 日 动 转移 到 下 一 行 。 


后 文 在 讲 到 弹性 盒 布 局 和 网 格 布 局 时 ， 会 展示 把 display 属性 的 值 设置 为 flex 或 griqd 
将 对 容 需 元 系 内 的 子 元 系 产 生 什 么 影响 。 在 这 种 情况 下 ， 容 需 元 系 被 称 为 父 元 素 。 








不 同 于 行内 元 系 ， KEAN display: block; 的 元 素 无 论 内 容 的 宽度 如 何 ， 都 会 目 动 占用 
整 行 空间 ， 如 图 80 所 示 。HTML 标签 «div» 默认 是 块 级 元 素 。 





块 级 元 素 





R| 80 display: block; 











设置 display: block; PENRE X76 3R Pu RE, AURATA HRA Và. E 53 NA E A 
别 ， 如 图 81 所 示 。 


div (width: n;) 中 的 nn 为 容器 宽度 ， 以 像素 值 或 百分比 形式 表示 





图 81 


display: inline-block; 结合 了 inline M block 的 效果 ， 能 为 行内 元 素 自 定义 大 小 ， 
其 效果 如 图 82 所 示 。 





图 382 display: inline-block: 








图 83 展示 的 效果 是 ,在 两 个 宽度 为 5096 容 融 宽度 的 块 级 元 系 中 将 文本 居中 〈text-align: 
center; )。 需 注意 ， 当 占据 其 父 元 素 的 一 整 行 时 ， 内 容 区 域 仅 占 父 元 系 宽 度 的 $0%。 块 级 元 系 











的 宽度 不 由 其 内 容 的 宽度 决定 。 


赤 狐 四 顾 导 找 猫 物 
灰 狼 对 着 满月 长 啸 





图 83 text-align: center; 


为 两 个 块 级 元 素 显 式 设 置 宽度 为 $0% 并 应 用 text-align: center;， 之 后 便 可 以 应 用 
float: left; mk float: right; 来 模仿 行内 元 素 , 如 图 84 所 示 。 然 而 与 行内 元 素 不 同 的 是 ， 
单独 的 块 级 元 素 永 远 不 会 跨越 到 下 一 行 。 

赤 狐 四 顾 寻 找 猎 物 灰 狼 对 着 满月 长 啸 


float: left; float: left; =% float: right; 


赤 狐 四 顾 寻 找 猎物 灰 狼 对 着 满月 长 啸 


float: left; float: left ; 


IRIA HST ERIE 灰 狼 对 着 满月 长 啸 


float: left; float: right; 

















图 84 利用 float 属性 


因为 行内 元 素 始终 受 限于 其 内 容 的 宽度 ， 所 以 其 中 的 文本 无 法 眉 中， 如 图 85 所 示 。 











«span» 元 素 是 行内 元 素 ， 其 中 的 文本 无 法 居中 


赤 狐 四 顾 导 找 猎物 灰 狼 对 着 满月 长 啸 








图 85 “行内 元 素 始终 受 限于 其 内 容 的 宽度 





通过 设置 visibility 属性 ， 可 以 在 不 将 元 素 从 绘制 层级 中 删除 的 前 提 下 隐藏 该 元 素 。 
86 和 图 87 给 出 了 示例 。 


.b { visibility: visible; b .b ( visibility: hidden ; ) 


图 86 把 元 素 b 的 visibility jat 隆 设 置 为 hidden 后 ， 该 元 素 隐 藏 。 visibility Jg 隆 的 默认 值 为 visible 





.b ( display: block; } .b ( display: none;) 


图 87 XEHaisplavy: none; 56 A M 22 E 2C HP ER 3S 








float 属性 用 于 定义 元 系 的 浮动 方向 ， 图 88 ~ 图 90 给 出 了 一 些 示 例 。 


float: left; float: left; float: right; 





图 88 ”只 要 宽度 之 和 小 于 父 元 素 的 宽度 ， 设 置 为 float: left; M float: right; 的 块 级 元 素 就 会 出 
现在 同一 行 


float: left ; 


float: right; 





图 89 如 果 两 个 浮动 元 素 的 宽度 之 和 大 于 父 元 素 的 宽度 ， 那 么 其 中 一 个 元 素 将 跳 到 下 一 行 


float: left; float: left; 


float: left; noat ngng 


- | | clear: both; 
float: right; float: right; float: right; 


clear: both; 





图 90 使 用 clear: both; 清除 浮动 并 创建 新 的 浮动 行 
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渐变 有 许多 用 途 ， 其 中 最 稼 见 的 用 途 是 为 UI 元 素 提 供 平 请 的 颜色 过 渡 效 果 。 


以 下 是 渐变 的 一 些 用 途 。 








平滑 过 渡 的 背景 颜色 能 让 HTML 元 素 更 具 吸 引力 。 


方 省 市 宽 是 渐变 的 力 一 个 好 处 ， 这 是 因为 渐变 是 通过 浏览 带 的 看 色 算 法 目 动 生成 的 。 这 意 
味 看 可 以 用 渐变 效果 代 瞧 图 像 ， 而 无 须 在 下 载 图 片上 消耗 时 间 。 





简单 定义 background 属性 就 能 得 到 有 趣 且 出 人 意料 的 效果 。 为 linear-gradient 和 
radial-gradient 提供 所 需 的 最 少 的 属性 值 ， 就 可 以 实现 10.1 节 展 示 的 所 有 效果 。 





10.1 概览 


掌握 渐变 的 关键 在 于 用 好 关于 新 变 方 呵 和 渐变 类 型 的 4 个 属性 : linear-sgradient, 
radial-gradient, repeating-linest-gradient4 fepeating-radial-gradtient,. |91 
有 助 于 更 好 地 理解 CSS 创建 的 各 种 渐变 效果 。 在 本 章 中 ， 我 们 将 学 习 如 何 实现 图 中 的 渐变 
De 
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图 91 渐变 效果 示例 


用 于 演示 渐变 的 样本 元 素 





我 们 将 用 一 个 简单 的 <aiv> 元 素来 沉 示 背景 渐变 。 先 设置 一 些 基 本 属性 ， 比 如 将 宽度 和 高 
度 均 设置 为 500px。 


日 前 只 需要 一 个 简单 的 方块 元 素 。 将 以 下 代码 精 贴 到 HTML 的 <head> 标签 中 。 


<style byuDe-"ttexU/csst- 
Gi { 
position: relative; 


cCLispolay; blocks 


widcn: 500px; 
heicgimts 5000x} 
} 
«/style» 


这 段 CSS 代码 会 让 网 页 中 的 每 个 <div> 元 素 都 变 成 宽 500 像素 、 高 500 像素 的 正方 形 。 关 
F position 属性 和 aisplay 属性 的 用 法 ， 请 分 别 参阅 第 4 章 和 第 7 章 。 





如 果 只 想 给 其 中 一 个 HTML 元 素 设置 渐变 将 果 ， 那 么 可 以 使 用 唯一 的 ID (例如 #my- 
gradient-box) 设置 单个 <div> IAHI CSS 样式 ， 如 下 所 示 : 


48 | 10 颜色 渐变 


< lee eee/ 

divimy-gradient-box { 
position: relative; 
digolay: blocks 
widths 500px} 
heights 500023 

} 

</style> 


然后 把 这 些 代 码 加 在 <body> 标签 里 : 


«i-- jA&JEUR REL MIEDE o 


<Civ 1C="my-grechent-boz"></div> 
或 者 直接 在 HTML 768 HJ <style> 标签 中 输入 CSS VIS: 
Al scyle="posicLon: el ee widths 5000x; heighecs 5000; — qve 


在 图 92 中， 左边 的 是 宽度 和 高 度 均 为 500 像素 的 <div> 元 素 。 右 边 的 竖 条 和 横 条 说 明 ， 


渐变 会 日 适应 元 系 大 小 。 渐 变 的 属性 值 没有 改变 ， 但 仅仅 改变 元 素 故 才 后 ， 送 变 看 起 来 就 已 经 
很 不 一 样 了 。 





500px 








图 92 ”渐变 会 目 适 应 元 素 大 小 


在 实际 使 用 渐变 时 请 说 记 ，CSS 渐变 会 自 适 应 元 素 大 小 ， 而 这 会 产生 不 同 的 渐变 效果 。 
图 93 展示 了 渐变 的 核心 思想 。 


10.2 ”渐变 类 型 | 49 


起 始 颜色 


终止 颜色 








图 93 ”渐变 的 核心 思想 是 在 至 少 两 种 颜色 之 间 柄 值 





在 没有 提供 额外 属性 值 时 ， 和 对 下方 回 是 渐 杰 的 殉 认 方向 。 起 始 颜色 从 元 妹 的 顶部 开始 ， 逐 
渐变 化 ， 最 终 渐 变 成 的 部 的 终止 颜色 。 也 可 以 使 用 两 种 以 上 的 颜色 创建 渐变 效果 ， 稍 后 会 给 出 
例子 。 





所 有 的 CSS 渐变 属性 值 都 属于 background 属性 。 以 下 是 创建 线性 渐变 效果 的 简单 示例 : 


background: linear-gradient(black, white); 


稍 后 会 通过 示例 说 明 这 些 属 性 值 的 具体 作用 。 





10.2 ”渐变 类 型 


让 我 们 一 步 一 步 地 学 习 不 同 的 渐变 类 型 ， 并 看 看 将 这 些 样式 应 用 于 HTML 元 素 会 产生 何 种 
效果 。 图 94 展示 了 简单 的 线性 渐变 效果 。 
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làinear-gradaemt(black, white) làinear-gradient(yellow, red) 


图 94 £: 由 黑色 渐变 到 日 色 ; A: 由 黄色 渐变 到 红色 





如 图 95 所 示 ， 使 用 属性 值 co left 和 to right 可 以 创建 水 平 渐 变 效 果 ， 具 体 使 用 哪个 
属性 值 取 决 于 需要 的 水 平 渐变 方向 。 





linear-gradient(to left, black, white) lnear-gradient(to right, black, white) 


图 95 使 用 to left 和 to right 创建 水 平 渐变 效果 





iHa HE to top left, to top right, to bottom left, to bottom right, 


可 以 设置 从 某 一 角 开 始 ， 泊 对 角 线 方 回 的 颜色 渐变 ， 如 图 96 Bron 
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limear-gradiemnt linear-gradient 
(to top left, black, white) (to top right, black, white) 





linear-gradient linear-gradient 
(to bottom left, black, white) (to bottom right, black, white) 


图 96 ”从 某 一 角 开 始 ， 沿 对 角 线 方向 的 颜色 渐变 


当 45 度 角 不 能 满足 需求 时 ， 可 以 像 1inear-gradient(30deg, black, white); 这 样 ， 
把 linear-gradient 设置 为 0 ~ 360 的 任意 角度 。 在 图 97 中 可 以 看 到 ， 当 角度 值 从 10 REX 
渐变 到 90 度 时 ， 潮 变 方 向 从 随同 底部 逐渐 变 为 基站 左边 。 


10deg 20deg 30deg 40deg 50deg 60deg "70deg 80deg 90deg 


图 97 线性 渐变 的 不 同 角 度 


radial-gradient 属性 用 于 创建 径 向 渐变 ， 如 图 98 所 示 。 交 换 颜 色 参 数 会 产生 相反 的 渐 
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radial-gradient radial-gradient 
(black, white) (white, black) 


图 98 答 向 渐变 效果 示例 


与 线性 渐变 相同 ， 径 向 渐变 的 方向 也 可 以 设置 为 从 HTML 元素 的 任意 一 角 开 始 ， 如 图 99 
Biz 





radaial- gradient radaai- gradient 
(at top left, black, white) (at top right, black, white) 





radial-gradient radial-gradient 
(at bottom left, black, white) (at bottom right, black, white) 


图 99 径 回 渐变 的 方向 也 可 以 设置 为 从 任意 一 角 开 始 
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repeating-linear-gradient MIrepbeating-radial-gradient 分 别 用 于 创建 重复 
的 线性 渐变 和 径 回 渐变 。 可 以 根据 需要 设置 多 个 要 重复 的 颜色 值 ， 不 要 忘记 用 去 号 分 隔 ， 如 


图 100 所 示 。 
© 


repeating-linear-gradient repeating-radial-gradient 








(white 100pz, (white 100pz, 
black 200px, black 200pz, 
white 300px) white 300px) 


图 100 重复 的 线性 渐变 和 径 向 渐变 


可 以 用 HSL 值 的 组 合 创建 最 高 级 的 渐变 。HSL 值 并 没有 名 称 或 RGB 等 效 项 ， 它 们 的 取 值 
范围 是 0 ~ 300， 如 图 101 和 图 102 所 示 。 





lnear-gradzent lnear-gradzent 
(hsl(0,100%,50%), (hsl(0,100%,50%), 

hsl(50,100%,50%), hsl(50,100%,50%), 
hsl(100,100%,50%), hsl(300,100%,50%)) 
hsl(150,100%,50%), 

hsl(200,100%,50%), 

hsl(250,100%,50%), 

hsl( 300,100%,50%)) 





图 101 JH HSL 值 的 组 合 创建 高 级 渐变 
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图 102 ”通过 在 0 和 300 之 间 取 HSL 值 ， 可 以 选 





至 此 ,我 们 已 经 了解 了 与 渐变 有 关 的 多 个 属性 值 。 可 以 尝 
看 看 效 末 如 何 。 以 下 是 示例 代码 。 





backorouncds 
Ioelou ounce 
baekorournds: 
d: 
d 
d 
d 


backgroun 


Deckcosounc- 
Ipaclscuroune: 





baelououncde 


ad 1 
Dis 
n: 
[uc (150, 
(000p 
quem 


15030005 





baekdatounds 
Decl oumcl-: 
lnare ieneonel: 
baekdarounmnd: 























先 择 任何 一 种 颜色 


答 试 把 这 些 属 性 值 应 用 到 UT 2638 E, 
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linear-gradient(yellow, red); 
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RER TAREA RRIA? 未 必 如 此 。 本 章 旨 在 帮助 你 全 面 地 了 解 HTML 背景 图 片 。 
我 们 将 学 习 几 个 能 够 为 HTML 元 素 设 置 背景 图 片 的 CSS 属性 。 


本 章 将 以 一 张 可 爱 小 猫 的 照 帮 作为 示例 ， 如 图 103 所 示 。 
邮 





o 


FB E. T TN 








图 103 ”背景 图 片 示 例 





如 果 元 素 的 尺寸 大 于 图 片 的 尺寸 ， 那 么 图 片 会 在 该 元 素 内 重复 ， 填 充 元 素 的 剩余 部 分 ， 就 
像 在 元 素 中 重复 铺 一 张 墙纸 一 样 ， 如 图 104 所 示 。 
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图 104 ”如果 背景 图 片 比 元 素 小 ， 那 么 这 张 图 卢 将 重复 显示 ， 填 充 剩 余 的 空间 





要 为 元 系 设 置 育 景 图 片 ， 可 以 采用 以 下 两 种 方式 之 一 : 


backgrounds wb Tem gog 
beckground-rmages urt(*krtten-J3pg*)5 


此 外 ， 可 以 把 CSS 代码 放置 在 «style» 标签 内 ， 当 作 内 部 样式 表 使 用 。 


如 果 不 想 让 背景 图 片 在 元 素 中 重复 ， 请 把 packground-repeat 属性 设置 成 no-repeat， 
效果 如 图 105 所 示 。 














R| 105 background-repeat: no-repeat; 


F| HH background-size 可 以 设置 痛 景 图 片 的 尺寸 。 图 106 展示 了 不 同 的 效果 ， 其 中 ， 
unset, none, initial, auto 都 是 默认 效 末 。 当 属性 值 为 100s 时 ， 会 把 网 片 宽 度 设 为 与 
元 聚 等 宽 ， 但 纵 问 仍 会 重复 填充 背景 图 片 。 当 属性 值 为 100s$ 1002 时 ， 会 在 元 素 中 平 铺 背景 
图 乒 。 当 属性 值 为 cover 时 ， 背 景 图 片 会 纵 癌 填 满 元 系 ， 而 横向 溢出 的 部 分 将 被 裁 去 。 属 性 值 
contain 的 效果 与 1002 的 效果 一 致 。 
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background-size: unset; background-size: cover; background-size: contain; 
background-size: none; 
background-size: initial; 
background-size: auto; 


background-size: 5096; background-size: 5096 5090; 
Cn) ( 横 轴 ) 〈 纵 轴 ) 





图 106 利用 lbackground-size 设置 背景 图 片 的 尺寸 ， 以 实现 不 同 的 效果 


同时 使 用 background-repeat: no-repeat; 和 background-size: 100$; 能 让 背景 


图 片 横向 占 满 元 素 而 不 重复 ， 如 网 107 所 示 。 




















图 107 使 背景 图 片 横 回 占 满 元 系 而 不 重复 


如 果 想 让 背景 图 片 纵 回 重复 显示 ， 同 时 又 想 让 它 横 回 占 满 元 系 ， 只 需 删 除 no-repeat 这 一 
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项 即 可 。 图 108 展示 了 这 样 的 效果 。 














图 108 ”背景 图 片 纵 癌 重复 显示 


上 述 方法 用 于 为 很 长 的 页 面 设置 重复 的 背景 岁 片 。 你 既 可 以 让 背景 网 片 不 重复 ， 也 可 以 让 
它 不 断 重 复 ， 这 取决 于 你 想 怎样 设计 网 页 布局 。 





有 时 ， 需 要 让 硼 景 图 片 刚 好 铺 满 整 个 元 系 ， 但 这 通 稼 会 让 硼 景 图 片 发 和 后 变形。 浏览 硕 会 目 
动 根据 元 桑 的 长 窜 比 例 拉 伸 背 景 图 片 ， 如 图 109 所 示 。 





2d PN 


Mio, 





图 109 * HTML 元 素 的 大 小 与 背景 图 片 的 大 小 不 匹配 时 ， 就 会 发 生 这 种 变形 














[EH background-size: 100% 1002; 会 让 背景 图 片 铺 满 元 素 。 注 意 ， 属 性 值 中 的 100% 
出 现 了 两 次 ， 第 一 个 100g 会 让 图 片 横向 占 满 元 素 ， 第 二 个 则 让 图 片 纵向 占 满 元 素 。 你 也 可 以 
使 用 0 和 1002 之 间 的 其 他 值 ， 不 过 在 大 多 数 时 候 没 有 必要 这 样 做 。 
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11.1 设置 多 个 属性 值 


在 CSS 中 ， 如 果 要 同时 设置 多 个 属性 值 ， 则 属性 值 之 间 要 用 空格 分 隔 。 不 过 ， 有 时 也 会 用 
到 逗号 ， 例 如 在 设置 多 重 冶 景 图 片 时 ， 不 同 图 片 的 URL 就 是 用 去 吕 分 隔 的 。 








11.2 background-position 


background-position 属性 用 于 设置 育 景 图 片 的 起 始 位 置 ， 如 图 110 所 示 。 


PA 92 | 
ilf U 


í : (uid U 


图 110 background-position: center center; 的 效果 





在 图 110 的 基础 上 ， 把 background-repeat 属性 设置 为 no-repeat ， 可 以 让 背景 图 片 强 
制 居 中 ， 而 且 不 再 重复 显示 ， 如 图 II rz. 


























图 111 让 背景 图 片 强制 居中 ， 而 且 不 再 重复 显示 
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居中 表 景 图 片 : 


background-position: center center; 





让 背景 图 片 不 青 重复 显示 : 
background-repeat: no-repeat;j 


通过 将 background-repeat 设置 为 repeat-x, up DEB EA GR X ^8 ( Tis [n] ) 重复 ， 
如 图 112 所 示 。 

















图 112 background-repeat: repeat-x; 的 效果 


同 理 ， 使 用 属性 值 repeat-y 可 以 让 背景 图 片 仅 沿 7 轴 (纵向 ) 重复 ， 如 图 113 所 示 。 
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图 113 background-repeat: repeat-y; 的 效果 


一 言 以 蔽 之 ， 要 灵活 地 调整 属性 值 来 实现 所 需 的 效果 。 
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11.3 ZEBA 


可 以 为 同一 个 HTML 元 系 设 置 多 个 背景 图 片 , MAIEK MR. BS 114 展示 了 两 个 图 片 文 件 。 


imagel.png image2.png 














图 114 两 个 图 片 文件 





在 image2.png 中 ， 棋 盘 图 腔 表 示 透 明 区 域 ， 这 些 区 域 并 不 是 网 片 本 刁 的 一 部 分 。 这 样 的 表 
示 方 式 在 Photoshop 等 图 片 处 理 软件 中 很 管见 。 





当 像 image2.png 这 样 的 图 片 位 于 其 他 图 片 或 HTML 元 素 之 上 时 ， 透 明 区 域 不 会 遮挡 其 下 的 
内 容 ， 这 就 是 CSS 多 重 背景 的 原理 。 





以 图 114 中 的 图 片 为 例 ， 要 为 HITML 元 素 设 置 多 重 背 景 ， 可 以 使 用 以 下 这 上 段 CSS 代码 : 


boy DO 








注 章 ， 图 片 的 顺序 非常 重要 。 排 在 最 前 面 的 图 片 显 示 在 最 上 层 ， 这 就 是 要 从 image2.png FF 
始 的 原因 。 显 示 效 果 如 网 115 所 示 。 




















图 115 将 有 透明 区 环 的 图 片 颂 加 在 夯 一 张 刚 片上， 实现 多 重 背景 效 末 
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这 个 例子 演示 了 如 何 为 块 级 元 系 设 置 多 重 痛 景 。 接 下 来 骨 看 一 个 例子 ， 如 图 116 所 示 。 


rea 





























[ 








puppy.png pattern.png 


图 116 Æ: 高 有 透明 区 域 的 小 狗 图 瞩 ; A: wA RRR 


将 小 狗 图 片 puppy.png 放 在 属性 值 的 第 一 项 ， 使 它 琶 加 在 图 案 图 片 pattern.png 之 上 ， 代 码 
如 下 : 


LOCU becdiscuoundessus i s DaDDi orae) (ee 


效果 如 图 117 所 示 。 





es 





图 117 小 狗 图 片 位 于 图 案 之 上 
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除了 background 属性 ， 还 有 一 些 与 背景 相关 的 属性 也 可 以 接受 多 个 属性 值 ， 以 下 列举 一 
些 例 子 。 


L] background-attachment 
L] background-clip 

Q background-image 

L] background-origin 

Q background-position 
U background-repeat 


Q background-size 





有 一 个 例外 ， 那 就 是 backgroundq-color。 这 是 因为 ， 设 置 多 个 背景 颜色 值 没有 意义 。 当 
设置 背景 颜色 后 ， 整 个 元 素 会 被 纯色 填充 ， 这 与 设置 多 重 背 景 截 然 不 同 。 多 重 背 景 要 求 至 少 有 
一 张 背 景 图 片 含 有 透明 区 域 。 因此， 不 应 该 设置 多 个 背景 闫 色 值 。 








11.4 background-attachment 





利用 background-attachment， 可 以 设置 页 面 深 动 时 背景 图 片 如 何 显 示 。 图 118 展示 了 
background-attachment: scroll; 的 效果 ， 即 背 景 图 片 随 关 页面 深 动 而 移动 。 

















图 118 左 图 是 页 面 深 动 前 的 效果 ， 左 图 是 页 面 深 动 后 的 效 来 


利用 lbackground-attachment: fixed;， 可 以 使 背景 图 片 不 随 页 面 深 动 而 移动 ， 如 图 119 
所 示 。 
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图 119 background-attachment: fixed; 的 效果 ， 即 背景 图 片 固 定 


11.5 Dbackground-origin 


background-origin 属 性 基于 CSS 盒 模型 指定 背景 图 片 的 相对 位 置 . 它 可 以 取 3 个 属性 值 ， 
分 别 是 content-box、padding-box、border-pbox， 如 图 120 和 图 121 所 示 。 


v e 


BSNS AT 





图 121 Æ: content-box; HH: padding-box; £1: border-box 


此 外 ， 利 用 属性 packground-position-x 和 background-position-y,， 可 以 为 背景 
图 片 创 建 让 富 的 方位 模式 ， 如 图 122 所 示 。 
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图 122 $54 HH Lbackground-position-x Ml background-position-y 











最 后 需要 补充 的 是 ，backgrouna 及 其 他 与 背景 设置 相关 的 属性 不 仅 可 以 用 于 指定 背景 图 
片 ， 还 可 以 指定 纯色 、 线 性 渐变 、 径 加 渐变 。 图 123 给 出 了 一 些 例子 。 





background: url("kitten.jpg"); background-color: vellow; background: linear- 
gradient(to right, gradient(black, white); 
black, white); 


图 123 除了 指定 背景 图 片 ， 还 可 以 用 background 及 其 他 相关 属性 指定 纯色 、 线 性 渐变 、 径 向 渐变 







4 


AAAAAAAAAAAAAAAA 


/ 





object-fit 


background 属性 的 一 些 功能 已 经 被 object-fit 属性 所 取代 ， 但 它们 有 一 些 细微 的 区 别 。 


overflow: visible; 


| overflow: hidden; 


> e 
Te 3E 





图 124 使 用 object-fit 属性 可 以 让 对 象 以 不 同 的 方式 适应 父 元 素 的 大 小 。 属 性 值 从 左 到 右 分 别 为 
fill. cover, contain, none 
在 图 124 F, 第 1 行 设置 了 overflow: visible;， 第 2 行 则 设置 了 overflow: hidden;, 
第 3 行 的 overflow 属 性 值 与 第 2 行 的 相同 , 但 HTML 元 系 的 长 宽 比 正好 相反 。 这 说 明 ， 
object-fit 的 效果 会 随 元 系 长 宽 比 的 不 同 而 有 所 不 同 。 











需要 注意 的 是 ， 虽 然 与 backgrouna 属性 很 相似 ， 但 是 opject-fit 属性 只 用 于 不 作为 背 
景 的 图 片 (以 <img> 标签 创建 )、 视 频 以 及 其 他 元 素 。 
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CSS 边框 的 奥妙 之 处 远 比 表面 上 看 到 的 要 多 ， 尤 其 是 设置 边框 半 径 属 性 。 有 了 横 癌 和 纵 回 的 值 
之 后 ， 边 框 半 人 径 便 可 以 影响 同一 元 条 的 其 他 角 。 在 详细 介绍 边框 半径 之 前 ， 先 总 体 介 绍 CSS 边框 。 





13.1 概览 


我 们 可 以 通过 JavaScript 控制 所 有 的 CSS 属性 。 以 图 125 为 例 , 先 用 document . getElement- 
ById("container") 获取 一 个 元 又 的 所 有 CSS 属性 ， 再 用 元 素 名 .style 访问 这 些 属 性 。 


<body style = "margin: 30p7; "> 
«div id = "container" » 
«div style = "width: 10095; height: 10025; 
background: white; " » CSS Is Awesome. </div> 
</div> 
</body> 


E CSS Is Awesome. 








var x = document. getElementById("container"); 
q.siyle.foniSize = "925pz". 

z.style.hneHeight = "50pz"; 

z.style.uidth = "500pz"; 

z.style.height = "200pz"; 

z.style.border = "30pz solid silver"; 
z.style.background = "url(diag.png)"; 
z.style.paddang = "30pz"; 


图 125 通过 JavaScript 控制 CSS 属性 


可 以 使 用 border 属性 同时 设置 所 有 边 的 边框 ， 如 下 所 示 。 


londepe5pxcsoludegegs 


border-radius 属性 用 于 为 元 又 设置 圆 角 边框 ， 如 图 126 所 示 。 


top-left top-right 





border-radius: 40px; 
border-top-left-radius: 40px; 


border-top-right-radius: 40px; 
border-bottom-right-radius: 40px; 
p border-bottom-left-radius: 40px; 


bottom-right ipi 


bottom-left 


SS 
NCSS Is Awesome. 


b 


N 


NNN CONNU, 
" z 
NNNNN NN NNN 


—— CSS Is Awesome. 


X 


NRSR RRR 
«CSS Is Awesome. 
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border-bottom-left-radius: 40px; 


B| 126 border-radius 
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图 127 详细 地 说 明了 何谓 边框 半径 (border radius ). 


border-top-left-radius border-top-right-radius 
border-width: 20px; 





border-bottom-left-radius border-bottom-right-radius 


图 127 分别 为 四 个 角 设 置 边框 半径 





如 宁 使 用 大 于 或 等 于 元 系 大 小 的 值 ， 则 实际 将 采用 适合 该 元 素 大 小 的 最 大 半径 值 ， 如 图 128 
Biz c 








使 用 一 个 很 大 的 值 (大 于 或 等 于 元 素 的 长 或 宽 ) 


图 128 ”最 大 边框 半径 


以 下 代码 可 以 实现 如 图 129 所 示 的 效果 。 
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Ponder eo lene rodis 00 > 
border-top-right-radius: 40px; 
border-bottom-left-rad1ius: 40px; 
border-bottom-right-radius: 40ps; 





图 129 奇妙 的 CSS 边框 效果 


13.2 WEZE 


即使 长 时 间 使 用 CSS， 很 多 人 也 不 知道 可 以 用 border-radius 属性 创建 椭圆 边框 ， 如 图 
130 所 示 。 不 过 ， 椭 圆 边框 的 效果 并 不 像 通 过 轴 对 称 半径 设置 的 边框 那样 容易 预测 。 
200px 


7 CSS Is Awesome. 
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~ NN 


SS 


图 130 border-top-left-radius: 200px 100px; 
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如 有 条 将 一 个 角 的 椭圆 边框 半径 设置 为 非常 大 的 值 ， 那 么 相 邻 角 的 弧度 会 受到 影响 (如 图 
131 所 示 )， 尤 其 是 半径 值 较 小 的 角 ， 这 就 是 椭圆 边框 的 效 末 不 容易 预测 的 原因 。 不 过 ， 这 也 有 
好 的 一 面 : 你 可 以 不 断 答 试 ， 或 许 能 实现 意 想 不 到 的 效果 。 


人 急 始 值 为 200px 100px 


实际 效果 对 应 的 值 却 


大 约 是 初始 值 的 一 半 


> 


这 是 因为 当 使 用 椭圆 边框 半径 时 ， 
如 打 为 一 个 角 设置 了 很 大 的 半径 值 ， 就 会 影响 相 邻 角 的 弧度 


图 131 如 果菜 一 角 的 半径 值 过 大 ， 相 邻 角 就 会 受到 影响 











再 来 看 一 个 例子 ， 如 图 132 所 示 。 


狭 罕 1000px 


图 132 ”将 椭圆 边框 半径 设置 为 非常 大 的 值 会 影响 其 他 角 

















在 图 133 中 ， 我 们 只 修改 右上 角 的 弧度 值 。 需 要 注意 ， 元 素 的 所 有 角 相 互 依赖 ， 因 此 没有 
被 修改 弧度 值 的 角 也 会 受到 影 啊 。 


Opx 


CSS Is Awesome. 





图 133 元素 的 所 有 角 相 互 依赖 
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好 了 ， 现 在 你 可 以 大 胆 答 试 ， 看 看 能 实现 什么 样 的 神奇 效 末 。 图 134 是 一 个 例子 。 


300px 50px 





图 134 不 一 样 的 边框 效果 
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二 维 变 换 包 括 对 HTML TRIT, Ae. AX. SIXTA transform 属性 的 属性 值 


translate, rotate, scaleg 








接 下 来 ,我 们 将 以 如 图 135 所 示 的 简单 元 素 为 例 ， 说 明 如 何 进行 二 维 变换 。 


SS ls Awesome 


图 135 (US ACTOR ZU AR ARRE] 


14.4 移动 


除了 使 用 top BEF left 属性 ， 还 可 以 使 用 transform: translate(x, y)j 在 x ai 
^I y 轴 上 移动 元 系 ， 如 图 136 所 示 。 


translate(30pz, 10pz) 


SS Is Awesome 





图 136 将 子 元 素 问 右 移 动 30px， 并 癌 下 移动 10px 
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14.2 ”旋转 


fH] transform: rotate ( 角度 值 ) ; 可 以 让 元 素 围绕 其 中 心 点 旋转 。 其 中 ， 角 度 值 的 取 
值 范围 是 0 ~ 360， 并 要 附 上 单位 aeg， 如 图 137 所 示 。 


rotate(5deg) 会 让 元 素 围 绕 其 中 心 点 旋转 5 度 





R| 137 transform: rotate(5deg); 
当然 ， 你 可 以 同时 移动 和 旋转 HTML 元 素 ， 如 图 138 所 示 。 


translate(30pz, 10px) rotate(5deg) 


图 138 ”将 子 元 系 问 右 移动 30px， 并 癌 下 移动 10px， 同 时 围绕 其 中 心 点 旋转 5 度 





移动 与 旋转 的 前 后 顺序 并 不 重要 。 也 就 是 说 ,translate(30px, 10px) rotate(5deg) 
和 rotate(5deg) translate(30px, 10px) 的 效果 一 样 。 


接 下 来 看 看 多 个 元 杂 的 情况 。 在 图 139 中 ， 设 置 为 daisplav: block; position: relative; 
的 3 个 元 系 同 时 旋转 了 相同 的 角度 。 





图 139 连续 排列 的 元 素 的 相对 位 置 保持 不 变 
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移动 变换 的 值 可 以 是 相对 于 元 又 大 小 的 百分比 ， 如 图 140 所 示 。 


以 相对 于 元 素 大 小 的 百分比 为 依据 进行 变换 





translate(50?5, 10px) rotate(5deg) 
translate(S0px, 10pz) rotate(5deg) 








图 140 第 2 个 元 素 移 动 的 距离 是 元 素 宽 度 的 一 半 


即使 在 旋转 后 ， 文 档 流 中 的 元 系 也 会 保持 相对 位 置 ， 如 图 141 Bras. 


图 141 元 素 的 整个 结构 保持 不 变 ， 就 像 一 个 块 级 元 系 一 样 





旋转 中 间 的 元 素 不 会 影响 其 他 元 素 在 整个 结构 中 的 位 置 。 不 过 ， 元 素 的 边缘 可 能 会 重 私 ， 
如 图 142 所 示 。 





translate(30pz, 10px) rotate(0deg) 
translate(30pz, 10px) rotate(5deg) 


图 142 ”旋转 不 同 的 角度 
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默认 情况 下 ， 元 系 围 绕 其 中 心 点 旋转 ， 如 图 143 所 示 。 


transform-origin: 50% 5096; < 默认 设置 > 


45deg 
60deg T5deg 90deg 


图 143 元素 默 认 绕 其 中 心 点 旋转 


使 用 transform-origin 属性 ， 可 以 为 元 素 的 旋转 设置 原点 ， 如 图 144 和 图 145 所 示 。 


transform-origin: 0 0; 


RSS UO D 


图 144 transform-origin: 


AAS a 





transform-origin: 10096 


图 145 transform-origin: 1002 0; 





MERIA XE REJUAR HU Pos aR 18. RKE, nIELRISSTERI— AEFI, WE 146 
所 未 。 


transform-origin: 25% 50% 


RUSSE 


K| 146 transform-origin: 
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三 维 变换 可 以 给 普通 的 HTML 元 系 增添 透视 感 ， 使 之 产生 三 维 效 果 。 


15.1 rotatex fI perspective 


使 用 transform: rotatex( 角度 值 ) ; 可 以 沿 着 x 轴 旋转 元 素 。 此 外 , 使 用 perspective 
属性 可 以 针对 三 维 元 系 进 行 透 视 变换 。 


以 图 147 为 例 ，3 £T2U3R BJ perspective 属性 值 分 别 是 100px、200px、300px。perspective- 
origin 属性 则 用 于 移动 透视 原点 。 


[ANSESNNSESS 相 


EPA; 5deo) " D rotateX(A5dàeov d 





perspective: 100px; perspective: 100px; perspective: 100px; 
perspective-origin: 7596 5096; perspective-origin: 50% 5096; < 默认 设置 > perspective-origin: 2596 5096; 





07 Transform 3D Transform 3D Transãiott 





I! 
perspective: 200px; perspective: 200px; perspective: 200px; 
perspective-origin: 7596 5096; perspective-origin: 5096 5096; < 默认 设置 > perspective-origin: 2596 5096; 


transform: rotateX(45deg); 


mu "E \ Eiai 


perspective: 300px; perspective: 300px; perspective: 300px; 
perspective-origin: 75% 50%; perspective-origin: 50% 50%; < 默认 设置 > perspective-origin: 2596 5096; 


图 147 ”为 元 系 增添 透视 感 
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15.2 rotateY fl rotatez 


与 rotatex 同 理 ,使 用 rotateY 和 rotatez 可 以 分 别 沿 着 > 轴 和 = 轴 旋转 元 素 。 图 148 
展示 了 一 些 效果 。 


j 3 
3D Transform 2 Transtom, 3D Transform 








rotateY(10deg) 沿 着 3 个 轴 都 旋转 10 度 rotateY(-10deg) 


默认 设置 


rotatez 











rotateZ(-10deg) perspective: Opx; rotateZ(10deg) 
perspective-origin: 5096 5096; 
transform: rotateX(0deg); 
transform: rotateY(0deg); 
transform: rotateZ(0deg); 


lk 148  rotatev 和 rotatez 


15.3 ”缩放 





使 用 scalex, scalev, scalez 可 以 分 别 在 x 轴 、y 轴 、z 轴 上 调整 元 素 的 大 小 。 当 没有 
预 设 透视 属性 时 ， 在 了 轴 上 缩放 元 素 并 不 会 改变 它 的 外 观 ， 如 图 149 所 示 。 


rotateX(45deg); scaleX( 7) 
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图 149 在 3 个 轴 上 任意 调整 元 素 的 大 小 


80 | 15 三 维 变换 


15.4 ”移动 


{E translateX, translateY, translatez 可 以 分 别 在 x 轴 、y "Wü. z 轴 上 移动 元 素 ， 
如 图 150 所 示 。 需 要 注意 的 是 ， 我 们 面向 z 轴 的 负 方 向 。 因 此 ， 使 用 translatez(200px) 会 
证 元 系 离 我 们 更 近 ，translatez(-200px) 则 会 让 元 系 离 我 们 更 远 。 换 句 话 说， 元 系 看 起 来 会 


相应 地 变 大 或 变 小 。 
translateX : m" 
BEG 































3D 3D 
translateY 
3D 3D 3D B 
translateZ B BH 


图 150 ”分别 在 3 个 轴 上 移动 元 系 



























































利用 matrix3d 属性 ， 可 以 生成 4x4 和 十 阵 (如 图 151 所 示 )， 用 于 定义 三 维 变 换 。 三 维 矩 
阵 的 原理 已 经 超出 了 本 书 范畴 ， 但 简单 地 说 ， 它 可 以 改变 透视 角度 。 在 三 维 诉 戏 中 ， 三 维 矩 阵 
第 用 于 设置 视角 ， 以 突出 主要 角色 ,或 “锁定 ”移动 的 对 和 象 。 














X Y Z 

m. m, m, m, 
m. m. m- m. 
mo mo Mm, m: 
mi13 m., m.s me 














transform: matrix3d(m1,m2,m3,m4,m5,m6,m7,m8,m9,m10,m11,m12,m13,m14,m15,m16); 


| 151 利用 matrix3d 属性 生成 4x4 符 阵 
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15.5 ”构建 立 万 体 


可 以 利用 CSS 的 三 维 变换 属性 和 6 个 HTML 元 素 构 建 如 图 152 所 示 的 立方 体 。6 个 HTML 
元 素 分 别 对 应 立方 体 的 6 面 。 














图 152 由 6 个 HTML 元 条 组 成 的 立方 体 ， 每 个 元 素 都 按 其 宽度 的 一 半 移 动 并 在 各 个 方向 上 旋转 90 E 





创建 元 素 的 代码 如 下 所 示 。 








«oa vecducse- Mets 
«ou elass = “tace roni BE ON S d 
<zóivyv class mae al aa 
<@hu Class = race right el AGBS S 
«daw elass = "tace Lert'"ctbertr-/dugve 
“nel uU oo ao on 一 
<div Class = Traca borcom" >botctomn</0Ly> 

</div> 

.view { 


widchns 200px; 
heights 200x; 
perspective: 300px; 


} 
接 下 来 ， 证 我 们 开始 构建 立方 体 吧 | 


.Cube { 
werden 10033 
height: 100$; 
position: relative; 
transform-style: preserve-3d0; 
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cranstorcms ee 0 cranslaceY (500x) 5 


.face ( 

positions ebsolutes 
widths 100px} 

lego 100px; 
baeckoround: eranspaeregb. 
border: 20x solid gray, 
text-align: center; 
line-height: 100px; 


iront (crans Rom rocaceY ceo) cranslarcez o 
Wonk la em {cranstocms Ql cranslacez (50o)? 
soaker ns orm rocateY(160cdeg) cranslacez (500x)? ) 
dert {crans rtorme CorcateY(-90ceg) tcranslarcez (500x) 7) 
ODR trans ornk robsatext90deg) rans ae Oe 


-Joor ome He eT cce) des cranslarcez (500x) 2] 


图 153 具体 地 说 明了 如 何 构建 立方 体 。 


.Cube { 
width: 10096; 
height: 10096; 
position: relative; 
transform-style: preserve-3d; 
transform: translateX(50px) translateY(50px); 





| 人 .face ( 
border-radius: 0; border-radius: 0; position: absolute; 
backface-visibility: visible; backface-visibility: hidden; width: 100px; 


height: 100px; 
background: transparent; 
border: 2px solid gray; 
text-align: center; 
line-height: 100px; 

} 


.front { transform: rotateY(Odeg) translateZ(50px); } 
right { transform: rotateY(90deg) translateZ(50px); } 
.back (transform: rotateY(180deg) translateZ(50px); } 
.left (transform: rotateY(-90deg) translateZ(50px); ) 
top (transform: rotateX(90deg) translateZ(50px); ) 
.bottom ( transform: rotateX(-90deg) translateZ(50px); } 










border-radius: 10px; border-radius: 10px; 
backface-visibility: visible; backface-visibility: hidden; 


图 153 构建 立方 体 


注意 , 将 backface-visibility 属性 设置 为 hidadqen， 可 以 隐藏 不 在 我 们 视线 中 的 元 素 ， 
使 立方 体 看 起 来 不 透明 。 





AAAAAAAAAAAAAAAA 


/ 


SHAPES Jer e AR PUN, TEER B HENRETTE, 


16.1 display: flex 





与 许多 其 他 的 CSS 属性 不 同 , TE SHE I Je P , RAMEN AR Ji 1 VACT 2628 HIER CA 
元 素 ) EAER Joy S TE HTEHIT ACUUAR , rE EHI T TOUR 


可 以 把 弹性 盒 元 素 看 作 设 置 为 sisplavy: flex; 的 父 元 素 。 位 于 其 中 的 元 素 称 为 子 元 素 。 
如 图 154 所 示 ， 每 个 父 元 素 都 有 一 个 起 始点 flex-start 和 一 个 终止 点 flex-end。 


主轴 
JUR (容器 ) €— — — justify 一 


"o 











我 们 将 使 子 元 素 有 一 定 的 外 边 距 ， | 
以 使 示意 图 更 直观 交叉 轴 align 











图 154 ”每 个 父 元 系 都 有 一 个 起 始点 和 一 个 终止 点 


16.2 主轴 和 交叉 轴 


虽然 子 元 系 是 线性 排列 的 ， 但 弹性 盒 布局 格外 注重 行 和 列 的 排 布 。 因 此 ， 弹 性 盒 布 局 有 两 
个 坐标 轴 : 模 轴 称 为 主轴 ， 纵 轴 称 为 交叉 轴 。 
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以 justify 开头 的 属性 用 来 控制 子 元 素 的 宽度 ， 以 及 它们 在 主轴 上 的 间隔 。 以 align F 
头 的 属性 用 来 控制 子 元 素 在 交叉 轴 上 的 显示 方式 。 


以 每 行 3 个 子 元 素 为 例 ， 如 果 要 排列 6 个 子 元素 ， 那 么 弹性 盒 布局 将 自动 创建 第 2 行 来 容 
纳 子 元 素 。 如 果子 元 系 超 过 6 个 ， 则 会 生成 更 多 行 。 

在 图 155 中 ， 子 元 素 均匀 地 分 布 在 主轴 上 。 之 后 我 们 会 看 看 如 何 通 过 设置 属性 来 实现 这 样 
的 效果 。 





图 155 子 元 系 在 主轴 上 均匀 分 布 


可 以 上 自 定 义 列 数 ， 如 图 156 所 示 。 父 元 素 中 行 与 列 的 排 布 方式 由 flex-dqirection、 
flex-wrap 等 属性 决定 。 本 章 稍 后 会 给 出 示例 。 





图 1$6“ 子 元 素 的 另 一 种 排 布 方式 


在 图 157 中 ， 父 元 素 包 舍 寺 个 子 元 系 。 在 网 认 情 况 下 ， 子 元 素 从 左 到 右 排列 ， 不 过 也 可 以 
反 过 来 。 
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父 元 素 〈 容 器 ) T 


T 子 元 素 F 
图 157 子 元 素 默 认 从 左 到 右 排 列 


16.3 方向 


使 用 flex-direction 属性 可 以 设置 子 元 素 的 排列 方向 ， 默 认 的 属性 值 是 row， 即 从 左 到 
右 排列 。 利 用 属性 值 row-reverse， 可 以 反 转 子 元 率 的 排列 方向 ， 如 图 158 所 示 。 


| M 


A《 fier-direction: row-reverse; 


图 158 ”利用 属性 值 row-reverse 反 转 子 元 素 的 排列 方 问 


16.4 换行 


flex-wrap 属性 用 于 设置 子 元 素 的 换行 方式 。 如 果 想 在 子 元 素 的 宽度 总 和 超过 父 元 素 的 宽 
度 时 将 子 元 素 换 行 ， 请 将 属性 值 设 置 为 wrap， 即 flex-wrap: wrap;， 如 图 159 所 示 。 








flex-wrap: wrap; 


图 159. 规定 子 元素 在 必要 时 换行 
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16.5 flex-flow 
flex-flow 是 flex-direction 和 flex-wrap 的 简写 形式 ， 只 用 这 一 个 属性 就 能 同时 设 
置 子 元 素 的 排列 方向 和 换行 方式 。 


它 的 语法 是 flex-flow: flex-direction 属性 值 flex-wrap 属性 值 ;。 在 图 160 中 ， 
通过 设置 flex-flow: row wrap;， 使 子 元 素 按 从 左 到 右 的 顺序 排列 ， 并 且 在 必要 时 换行 。 





fier-flow: row wrap; 


图 160 利用 Elex-flovw 属性 同时 设置 子 元 素 的 排列 方向 和 换行 方式 


利用 wrap-reverse 使 换行 方式 相反 ， 如 图 161 所 示 。 





fiex-flow: row wrap-reverse; 


图 161 wrap-reverse 的 效果 
图 162 ~ 图 165 展示 了 不 同 的 效果 。 其 中 用 到 justify-content 属性 ,16.6 市 将 详细 介绍 。 


NS gx UH _. 
父 元 素 (容器 ) 8 个 子 元 素 





E 163. f£lex-flow: row-reverse wrap; 
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图 164 flex-flow: row-reverse wrap-reverse; 


父 元 素 (容器 ) SA Tm 





图 165 flex-flow: row wrap; justify-content: space-between; 


a ELSE SUPE a AELA, PAJE flex-direction 设置 为 column。 这 样 一 来 ， 
flex-flow 的 效果 也 将 以 垂直 方向 为 准 。 图 166 展示 了 将 flex-direction 分 别 设置 为 column 
和 column-reverse 时 的 效果 。 


flex-direction: column ; flex-direction: column-reverse ; 





图 166 ”以 交叉 轴 优 先 
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16.6 justify-content 





图 167 直观 地 展示 了 当 justify-content 属性 分 别 取 不 同 的 属性 值 时 的 效果 。 在 本 例 中 ， 
每 行 仅 使 用 了 3 个 子 元 素 。 不 过 ， 弹 性 盒 布 局 对 子 元 素 的 数量 没有 限制 。 


flex-direction: row; 


jJustify- content 
mese mum NE | 
flez- end 
center 
space-between 


space-around 示例 1 


示例 2 


space-around 


stretch 


space-evenly 





图 167 justify-content 属性 的 用 法 示例 。 注 意 ， 如 果 将 其 设置 为 space-evenly， 和 那么 
无 论 元 素 的 大 小 如 何 ， 所 有 间 陋 都 是 相等 的 


图 168 中 的 属性 值 与 图 167 中 的 几乎 一 样 ， 只 不 过 方向 以 交叉 轴 优 先 , BI flex-direction: 


Co.Lunmp s-s 
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flex-direction: column; 


justify- content 


MFR FE LH 
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图 168 当 把 flex-direction WAX column 时 ， 也 可 以 使 用 justify-content 控制 
子 元 系 的 排 布 方式 


16.7 align-content 


align-content 的 效果 和 前 几 个 例子 很 相似 ， 只 不 过 它 作 用 的 对 象 是 一 组 子 元 条 ， 如 图 
169 和 图 170 所 示 。 在 给 多 组 子 元 系 设 置 间 隅 时 ，aliogn-content 属性 非 党 有用。 弹性 盒 布 局 
规范 将 图 169 中 的 应 用 场景 称 为 packing flex lines ( 控制 多 条 弹性 盒 轴线 )。 
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flex-direction: row; 
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图 169 用 align-content 控制 多 条 弹性 盒 轴线 (以 主轴 优先 ) 


flex-direction: column; 
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图 170 用 align-content 控制 多 条 弹性 盒 轴 线 ( 以 交叉 轴 优 先 ) 
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16.8 align-items 


align-items JREF ICRI TIR (RR) 的 水 平 对 齐 方式 。 图 171 展示 了 该 属 
性 取 不 同属 性 值 时 的 效果 。 


fler-start 
< 默认 值 > 


flez-end 


center 


stretch 


stretch 


baseline 





图 171 al1ign-items 用 法 示例 
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16.9 flex-basis 


flex-basis 的 作用 类 似 于 非 弹 性 盒 布局 属性 min-widthn。 当 设置 为 auto 时 ，flex- 
basis 将 根据 其 中 内 容 的 多 少 目 动 调整 子 元 系 的 大 小 ， 如 图 172 所 示 。 当 人 然 ， 也 可 以 将 属性 值 
设置 为 具体 的 数值 。 





flex-basis: auto; 


flex-basis: 50pz; 


图 172. £1ex-basis 用 法 示例 


16.10 flex-grow 


在 作用 于 一 个 子 元 素 时 ，flex-grow 属性 将 相对 于 同一 行 中 所 有 其 他 子 元 系 的 大 小 之 和 进 
行 伸缩 ,这些 子 元 素 将 根据 指定 的 属性 值 目 动 调整 。 在 图 173 中 ,flex-grow 的 属性 值 分 别 是 1、 
7， 以 及 最 后 一 行 中 的 3 和 5。 














图 173 £1ex-arow 用 法 示例 


16.11 flex-shrink 


flex-shrink 的 作用 与 flex-grow 的 正好 相反 。 在 图 174 中 ,设置 属性 值 为 7 意味 着 该 
子 元 素 将 “缩小 ”到 周围 子 元 系 大 小 的 7。 当然 ， 这 些 子 元 系 的 大 小 也 是 目 动 调整 的 。 
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7 7 | 7 上 7 —— 


flex-shrink: 7; (该 子 元 素 缩 小 为 其 他 子 元 素 的 1/7) m 


图 174 £1ex-shrink 用 法 示例 


在 单独 设置 某 个 子 元 素 时 ， 可 以 使 用 flex 属性 ， 它 结合 了 flex-grow、flex-shrink、 
flex-basis 的 功能 ， 语 法 如 下 所 示 。 


.item (flex: none | [«flex-grow»«flex-shrink» || «flex-basis»])j 
16.12 order 


可 以 使 用 order I ESCHHEPU- T 2628 HJ, WK 175 所 示 。 对 于 所 有 子 元 系 来 说 ， 默 认 
值 都 是 order: 0;, 


o M E E E 


order:0 order:0 order:0 order:0 order:0 
Z I I I I ] 
order:1 order:0 order:0 order:0 order:0 
s 
order:1 order:0 order:3 order:0 order:0 
1 
order:-1 order:0 order:0 order:0 order:0 


图 175 使 用 order 属性 重新 排列 子 元 素 的 顺序 
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16.13 justify-items 与 justify-content 


PL 属于 CSS 网 格 布局 属性 ， 类 似 于 弹性 盒 布 局 属性 justify-content. 
第 17 草 将 介绍 CSS 网 格 布局 ， 现 在 让 我 们 一 睹 为 快 ， 如 图 176 rz; 


当 把 justify-items 设置 为 normal 或 auto f, XRLF justify-content Hy flex-start 


stretch 的 效果 (如果 不 设置 宽度 值 ， 那 么 宽度 会 自 适应 ) 
= = 


center (也 可 以 设置 为 safe center 或 unsafe center) 设置 为 center 后 ， 元 素 的 宽度 会 自 适 应 内 容 的 宽度 


end 的 效果 类 似 于 justify-content BJ flex-ena 


图 176 justify-items 用 法 示例 
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CSS 网 格 布局 
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2017 年 ， 我 在 位 于 美国 得 克 萨 斯 州 的 一 家 软件 公司 参加 面试 。 那 里 的 团队 主管 告诉 我 ， 计 
算 机 科学 家 (或 者 说 所 有 领域 的 科学 家 ) 往往 通过 “填补 空 月 ”来 不 断 进 步 。 


这 人 句 话 让 我 至 今 无 法 扎 怀 。 


你 或 许 和 我 一 样 ， 发 现 上 自己 正在 试图 填补 学 习 CSS 网 格 布局 的 空白 ， 正 如 每 次 新 技术 出 现 
在 毫 无 准备 的 JavaScript 开发 人 员 的 面前 时 那样 。 





这 正 是 我 决定 在 本 书 中 利用 示意 图 呈现 CSS 属性 的 原因 。 











虽然 我 认为 自己 主要 是 JavaScript 程序 员 ， 但 我 也 同样 认为 自己 有 一 定 的 平面 设计 思维 。 就 
本 书 中 的 css 网 格 布 局 而 言 ， 也 许 我 就 是 在 “填补 ” 目 己 在 CSS 领域 的 “ 空 日 ”。 


正如 专业 的 图 书 设计 师 知 道 的 那样 ，CSS 网 格 布局 的 关键 并 不 在 于 抓 住 布局 设计 的 可 见 部 
分 ， 而 在 于 抓 住 那些 不 可 见 的 部 分 。 








容 我 解释 一 下 。 图 书 设计 师 关 心 页 边 距 一 一 一 个 第 被 忽视 却 十 分 必要 的 元 素 。 它 看 起 来 也 
许 不 重要 ， 但 倘 奋 删除 这 个 读者 最 不 在 乎 的 元 素 ， 整 体 的 阅读 体验 就 会 变 得 很 糟糕 。 只 有 在 页 
边 距 缺 失 时 ， 读 者 才 会 注意 到 它 。 因 此 ， 说 计 师 必须 关注 不 可 见 的 设计 元 素 。 











当 使 用 CSS 网 格 布局 进行 设计 时 ， 可 以 将 创建 美观 布局 的 工作 视 为 设计 高 级 版 本 的 图 书页 
WERI? 也 许可 以 。 


当然 ，CSS 网 格 布局 远 远 超出 了 设计 图 书页 边 距 的 范畴 ， 但 它们 在 深层 次 上 的 设计 原则 仍 
是 相同 的 一 一 不 可 见 的 元 素 依然 很 重要 。 在 CSS 网 格 布局 中 ， 这 个 概念 就 是 间隔 ( gap )。 毕 竟 ， 
在 某 种 程度 上 ，CSS 网 格 布局 就 像 是 另 一 个 层面 上 的 图 书页 边 距 。 
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17.4 创建 你 的 第 一 个 CSS 网 格 布局 


与 弹性 盒 相 似 ，CSS 网 格 布局 属性 永远 不 会 只 应 用 于 一 个 元 系 。CSS 网 格 布局 更 像 是 由 父 
元 系 及 其 子 元 素 组 成 的 整体 。 父 元 素 也 叫 作 容 器 ( container )。 





CSS 网 格 流 的 方向 既 可 以 是 按 行 排 布 ， 也 可 以 是 按 列 排 布 ， 但 默认 情况 下 是 按 行 排 布 。 这 
意味 着 如 果 不 更 改 默认 值 ， 那 么 子 元 系 将 上 自动 形成 一 行 ， 其 中 每 个 子 元 素 从 网 格 的 容 需 元 系 中 
继承 宽度 ， 如 图 177 所 示 。 














默认 按 行 排 布 






«div style = "display: grid" 
«div» 1«/div» 
«div»2«/div» 
«div»3«/div» 
«div»4«/div» 

</div> 


grid-auto-flow: row; 


按 列 排 布 








图 177 通过 设置 gria-auto-flovw 属性 来 决定 CSS 网 格 是 按 行 排 布 还 是 按 列 排 布 








CSS 网 格 布局 创建 了 一 个 虚拟 的 网 格 环境 ， 在 其 中 ， 子 元 系 不 需要 填 满 网 格 的 所 有 区 域 。 
不 过 ， 添 加 的 子 元 素 越 多 ， 被 填充 的 网 格 就 越 多 。 这 个 目 动 完成 的 过 程 在 CSS 网 格 布局 中 非常 
卓然 和 优雅 。 
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CSS 网 格 布 局 使 用 列 模板 和 行 模 板 来 分 别 控制 酸 向 和 纵 回 的 子 元 素数 量 。 如 图 178 所 示 ， 
可 以 分 别 使 用 CSS 属性 grid-template-columns fll grid-template-rows 来 指定 横向 和 纵 
问 的 子 元 系数 量 。 这 是 CSS 网 格 的 基本 结构 。 
子 元 素 : <div>1</div> <div>2</div> <div>3</div> 


g a) TP (6) a 





grid-template-rows: 
25px 25px 25px; 























grid-template-columns: 25px 25px 25px 25px 25px 25px; 
图 178 EHIE TRARA fa s AA AFTR AE 











请 留意 CSS 网 格 布局 对 间隔 的 定义 。 与 其 他 所 有 CSS 属性 不 同 ，CSS 网 格 布局 中 的 间隔 是 
从 元 素 的 左上 角 开 始 以 数字 编号 来 定义 的 。 





正如 你 所 料 ， 列 之 间 有 < 列 数 +1> 个 间隔 ， 与 之 类 似 ， 行 之 间 有 < 行 数 +1> 个 间隔 。CSS 
网 格 布局 没有 默认 的 内 边 距 、 边 框 或 外 边 距 ， 所 有 子 元 系 的 默认 值 都 是 content-box. 


使 用 属性 grig-row-gap 和 grigd-column-gap， 可 以 按 行 或 按 列 单独 设置 CSS 网 格 的 间 
陶 大 小 ( 间距 )。 为 方便 起 见 ， 也 可 以 只 用 属性 grid-gap 作为 快捷 的 缩写 设置 。 





在 图 179 中 ， 我 创建 了 一 个 小 型 网 格 ， 它 由 一 行 和 两 列 组 成 。 需 要 注意 的 是 ， 图 中 的 槐 形 
标识 表示 子 元 对 之 间 的 水 平 间 隅 与 垂 生 间隔。 此 后 的 所 有 示意 图 都 将 采用 这 种 表示 方法 。 间 隔 
与 边框 或 外 边 距 上 略 有 不 同 ， 这 是 因为 网 格 区 域 的 外 部 并 不 由 这 些 间 隔 所 填充 。 
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grid-template-columns: 100px 160px; 
| grid-template-rows: 25px; 
100px | 


25px 





图 179 由 一 行 和 两 列 组 成 的 网 格 布局 


让 我 们 来 仔细 研究 图 179 中 的 这 个 简单 的 例子 。 这 里 ， 我 们 利用 CSS 属性 grid-template- 
columns 和 grid-template-rows 定义 了 基本 的 网 格 布局 。 这 两 个 属性 可 以 取 多 个 值 ， 这 些 
值 以 空格 来 分 隔 。 在 这 里 ， 我 们 定义 了 两 列 〈100px 160px) 和 一 行 (25px )。 此 外 ， 即 使 定 
义 了 间距 ， 网 格 容 器 外 边框 上 的 间隔 也 不 会 添加 额外 的 内 边 距 。 因 此 ， 它 们 应 被 看 作 正 好 定义 
在 边缘 上 。 只 有 列 之 间 和 行 之 间 的 间隔 才 会 受 间距 的 影响 。 


现在 为 CSS 网 格 添加 更 多 子 元 素 。 如 果 行 模板 没有 足够 的 空间 来 放置 它们 ， 它 就 会 通过 目 
动 扩 展 网 格 来 创造 更 多 空间 。 在 图 180 中 ， 我 们 添加 了 子 元 素 3 和 子 元 素 4， 但 设置 的 grid- 
template-columns fll grid-template-rows 仅 为 最 多 2 个 子 元 又 提供 模板 。 


100px 160px 






图 180 IMTIR 3 和 子 元 素 4 
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17.2 隐 式 行 和 隐 式 列 


CSS 网 格 会 把 内 容 添 加 到 自动 创建 的 隐 式 网 格 中 ， 即 便 它 们 未 被 指定 为 网 格 模 板 的 一 部 分 ， 
CSS 网 格 也 会 这 样 做 。 我 豆 欢 称 隐 式 网 格 为 目 动 填充 网 格 ， 它 们 会 继承 现 有 模板 的 党 度 和 高 度 
并 且 只 需 在 必要 时 扩展 网 格 的 区 域 。 在 子 元 素数 量 未 知 的 时 候 ， 例 如 ， 当 回调 陋 数 从 数据 库 中 
返回 有 关 产 品 的 大 量 图 像 时 ， 这 个 特性 瓯 很 有 用 。 


在 图 181 中 ， 我 们 为 子 元 素 3 添加 了 隐 式 网 格 。 不 过 ， 由 于 没有 子 元 素 4， 因 此 最 后 一 个 
网 格 未 被 占用 ， 使 得 网 格 布局 并 不 均衡 。 














| EJ [3] [a3] 
1 O 3 


"B 
003 | Sd 


25px 





100px 160px 


图 181 TICK 4 缺失 


CSS 网 格 不 应 作为 表格 来 使 用 。 但 有 趣 的 是 ，CSS 网 格 布局 继承 了 HTML Table 布局 中 的 
一 些 设 计 。 事 实 上 ， 在 仔细 分 析 之 后 会 发 现 ， 它 们 之 间 的 相似 之 处 多 得 令 人 难以 置信 。 





在 图 182 中 ， 左 图 是 网 格 布 局 。grid-column-start、grid-column-end、grid-row- 
start, grid-row-end 提供 了 与 表格 的 colspan 和 rowspan 相同 的 功能 。 它 们 的 区 别 在 于 ， 
CSS 网 格 使 用 间 隅 空间 来 确定 span 区 域 。 稍 后 ， 你 将 看 到 一 种 简写 形式 。 请 注意 ， 这 里 隐 式 
添加 了 子 元 素 7 ~ 9。 因 为 子 元 素 1 在 网 格 中 占用 的 跨度 很 大 ， 所 以 往 后 推 了 3 个子 元 系 ， 而 
HTML Table 是 永远 不 会 这 样 做 的 。 
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«table id = "tab"» 





rid rowend: 3: | </tr> 
T «tr» «td»3«/td» «/tr» 

«tr» «td-4 </td> <td>5 </td> < td>6</td> </tr> 
</table> 





图 182 CSS 网 格 布局 与 HTML Table 布局 


17.3 grid-auto-rows 


grid-auto-rows 属性 会 让 css 网 格 使 用 特定 高 度 来 目 动 创建 隐 式 行 。 没 错 ， 可 以 设置 不 
同 的 行 高 。 我 们 可 以 为 网 格 中 的 所 有 隐 式 行 设置 特定 的 高 度 ， 而 不 是 从 grid-template-rows 
中 继承 ， 如 图 183 所 示 。 
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» 


100px 160px 


图 183” 隐 式 行 的 高 度 由 grid-auto-rows 确定 
当然 ， 你 完全 可 以 自己 设置 所 有 的 行 高 ， 如 图 184 所 示 。 


grid-template-columns: 100px 160px; 
grid-template-rows: 25px 50px; 
L 













50px 


图 184 明确 指定 所 有 行 高 和 列 宽 


在 某 种 程度 上 ， CSS 网 格 布局 的 grid-auto-flow 属性 提供 了 类 似 于 弹性 盒 的 功能 ， nfp 
通过 覆盖 行 和 列 的 默认 值 来 实现 ， 如 图 185 所 示 。 请 注意 ， 本 例 还 使 用 了 grid-auto-columns: 
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25px; 来 确定 连续 列 的 宽度 。 这 与 grid-auto-rows 的 原理 相同 ， 只 不 过 这 次 子 元 素 是 水 平 
排 布 的 。 


ED IN RE RE RR 


100px 25px 25px 25px 25px 25px 
grid-template-columns: 100px; 
grid-template-rows: 15px; 
p n column; 
grid-auto-columns: 25px; 














图 185 在 某 种 程度 上 ，grid-auto-flow 属性 提供 了 类 似 于 弹性 盒 模型 的 功能 


17.4 AZJI 


CSS 网 格 非 常 适 合用 来 创建 传统 的 三 栏 布 局 ， 即 中 间 一 列 的 两 侧 各 有 较 罕 的 一 列 。 实 现 方法 
非常 简单 ， 只 需 把 中 间 一 列 的 grid-template-columns 属性 设置 为 auto 即 可 ， 如 图 186 所 示 。 


自动 列席 


Nu 2) [s 

Ii 

" áUtó 

2, 
5 25px 
auto 

p^ 


100px auto 100px 


图 186 grid-template-columns: 100px auto 100px; 


这 样 一 来 ，CSS We EE EH A n UD s s HJ T 9 RESET TB RI. lüURBIUL, CSS 网 格 提 
供 了 大 量 的 属性 来 帮助 网 站 和 应 用 程序 的 布局 变 得 更 有 创意 。 





17.5 间隔 





前 面 在 讨论 间隔 时 ， 我 们 主要 关注 它 如 何 履 盖 各 行 和 各 列 之 间 的 空间 ， 但 没有 谈 到 如 何 更 
改 间 距 。 图 187 展示 了 间隔 如 何 影响 CSS 网 格 的 外 观 。gridq-column-gap 属性 用 于 指定 CSS 
网 格 的 列 间 上 距 。 
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grid-column-gap: 15px; 


grid-row-gap: 0; 
grid-column-gap: 15px; 


15px 15px 
25px LAM > 25px A 25px J 
50px 


oV 25px 








Bn 
o 
Bn 
o 
90px 





图 187 将 各 列 的 间距 设置 为 15 像素 
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我 故意 将 各 行 的 间距 缩小 为 0， 以 突出 展示 列 间 距 。 通 过 这 种 布局 ， 我 已 经 能 想象 出 类 似 
于 Pinterest 的 页 面 设计 了 。 


同 理 ， 通 过 使 用 grid-row-gap 属性 ， 可 以 为 整个 CSS 网 格 设置 行 间 距 ， 如 图 188 所 示 。 
同样 ， 我 把 各 列 的 间距 缩小 为 0， 以 突出 展示 行 间距 。 


grid-row-gap: 15px; 
50px (2)  50px 50px 5Opx 











图 188 ”将 各 行 的 间距 设置 为 15 像素 


使 用 grid-gap 属性 ， 可 以 同时 设置 行 间 距 和 列 间 距 。 不 过 ， 这 意味 着 将 行 间 距 和 列 间距 
设置 为 相同 的 值 。 在 图 189 中 ， 二 者 都 是 15 像素 。 
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25px 3, 25px o 25px (5) 





oV 25px 
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图 189 行 间 距 和 列 间距 都 为 15 像素 
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接 下 来 演示 CSS 网 格 的 不 同 用 法 。 在 图 190 中 ， 我 分 别 设 置 了 行 间距 和 列 间距 。 本 例 使 用 
了 较 宽 的 列 间距 ， 在 为 宽屏 布局 创建 图 片 栏 时 ， 可 以 这 样 做 。 
















42px 42px 
| | ii l i J | 
ia 
一 一 一 一 一 | 


图 191 与 图 190 类 似 ， 只 不 过 使 用 了 较 大 的 行 间 距 。 


图 190” 较 宽 的 列 间距 
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15px 15px 


ov 25px i 25px i 25px U 


5 d a 














5 dL a 





图 191 较 大 的 行 间 距 
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让 我 感到 失望 的 是 ，CSS 网 格 不 能 在 同一 方向 上 设置 不 同 的 间距 大 小 ， 如 图 192 Br. R 
认为 这 是 CSS 网 格 布 局 最 大 的 不 足 ， 希望 这 个 问题 在 将 来 能 得 到 解决 。 





grid-column-gap: 15px 42px 15px; 


15; 42 15 


oV 25px B) 25px y 25px 25px 5 


EN EN 





图 192 目前 暂时 无 法 使 用 CSS 网 格 创建 这 样 的 布局 


17.6 fr 单位 
A 


fr 是 分 数 单位 ,用 于 调整 剩余 空间 大 小 ,并 且 不 限于 CSS 网 格 。 不 过 ,大 与 CSS 网 格 相 结合 ， 
它 能 在 创建 未 知 屏 大 分 状 率 的 布局 时 发 挥 神奇 的 作用 一 一 保持 原先 的 比例 ， 而 无 须 使 用 百分比 。 





£r 单位 类 似 于 CSS 中 的 百分比 值 (25%$、50%、100% )， 但 它 使 用 小 数 进行 表 示 (0.25、 


0.5, 1.0) 
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不 过 ，1fr 并 不 总 是 等 同 于 100%8， 这 是 因为 fr 单位 会 自动 按 比 例 分 配 剩余 空间 。 图 193 
是 fr 单位 的 一 个 例子 。 


15px 15px 











无 论 10fr 占用 多 大 的 空间 ，1fr 都 是 10fr 的 十 分 之 一 ， 它 们 都 是 相对 值 。 这 对 于 赁 直觉 
行事 的 设计 师 来 次 是 个 好 消息 。 





若 使 用 1fr 定义 3 列 ,， 会 相应 地 生成 等 宽 的 3 列 ， 如 图 194 所 示 。 





15px 15px 
—— = —————— —Á 
Eg (2) La] | 
S Fa F 3 M7 


1> 
1fr 1fr 1fr 


图 194 使 用 ifr 定义 等 蜗 的 3 列 





也 可 以 用 小 数 来 定义 。0.5fr 正好 是 1fr 的 一 半 ， 而 它们 的 具体 宽度 是 相对 于 父 容 吉 宽 度 
得 出 的 ， 如 图 195 所 示 。 


15px 
b=- -—-E 


v g y 


|t» 


图 19$ 0.5fr 正好 是 1fr 的 一 半 
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可 以 混合 使 用 fr 单位 和 百分比 值 吗 ? 当然 可 以 ! 图 196 演示 了 混合 使 用 fr I$ 的 效果 。 






9 


D Z 


图 196 混合 使 用 fr 单位 和 百分比 值 


使 用 1fr 并 逐渐 增加 列 间距 会 产生 如 图 197 所 示 的 效果 。 本 例 使 用 了 5 个 CSS 网 格 ， 旨 在 
说 明 1fr 会 受到 间 隅 变化 的 影响 。 在 使 用 fr 单位 时 ， 应 该 注意 这 一 点 。 











图 197 itr 受 间 隅 变化 的 影响 


可 以 用 fr 单位 来 创建 如 图 198 所 示 的 布局 。 虽 然 我 不 知道 什么 时 候 需 要 这 种 庞大 的 布局 ， 
但 它 清晰 地 展示 了 fr 单位 如 何 影响 行 和 列 。 图 198 对 应 的 CSS 代码 如 下 所 示 。 


oric-tcemolarce rows, lir 15C DP Pre 5rp lir; 


oric-cemnolearce colimass Lir 15t tr 2-510 251 s Lir; 
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BEA 


图 198 用 fr 单位 创建 大 型 布局 


17.7 重复 值 


CSS 网 格 布局 允许 重复 使 用 属性 值 。repeat 属性 有 两 个 参数 : 重复 的 次 数 以 及 重复 的 形式 。 
以 下 两 行 代码 是 等 效 的 。 
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grid-template-columns: repeat(3, 60px 35px); 
grad-template-coiumns: 60px 35px 60px 35px 60px 35psx; 





效果 如 图 199 PTR ZR, repeat 属性 可 以 节省 很 多 精力 。 当 CSS 网 格 需要 有 重复 的 属 
性 值 时 ， 可 以 用 repeat 属性 避免 代码 元 余 。 


grid-template-columns: repeat(3, 60px 35px); 
grid-template-columns: 60px 35px 60px 35px 60px 35px; 


图 199 JH repeat 属性 避免 代码 元 余 


i AN 


repeat 属性 也 可 以 夹 在 其 他 属性 值 之 间 使 用 ， 如 图 200 所 示 。 在 本 例 中 ， 宽 度 分 别 为 
15px 和 30px 的 两 列 重复 了 3 次 。 


A3 R) \3) vU U g uU (8) \9) 


, 国 A A [C] [rd z [x] NENNEN 


图 200 grid-template-columns: 50px repeat(3, 15px 30px) 50px; 


17.8 span 
使 用 span 可 以 让 CSS 网 格 布 局 中 的 子 元 系 横 路 多 行 或 多 列 ， 这 和 HTML Table 布局 中 的 


rowspan 和 colspan 很 像 。 





我 们 使 用 repeat 属性 创建 网 格 ， 以 避免 代码 元 余 ， 如 图 201 所 示 。 这 个 网 格 是 本 节 的 示 
例 样 本 。 为 子 元 系 4 设置 grid-column: span 3; 之 后 , 产生 了 出 乎 意料 的 效果 。 瞧 图 中 那 
些 空白 的 区 域 ! 之 所 以 如 此 ， 是 因为 横 跨 3 列 的 子 元 素 无 法 放 和 原先 一 行 中 剩 下 的 区 域 。 
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grid-template-columns: repeat(5, 25px); 





图 201 使 用 grid-column: span 3; 合并 3 7 


在 CSS 网 格 布局 中 ,span 也 可 以 用 于 合并 多 行 。 如 果 合 并 后 的 子 元 素 高 度 大 于 网 格 的 高 度 ， 
那么 CSS 网 格 将 做 相应 的 调整 ， 如 图 202 所 示 。 


grid-template-columns: repeat(5, 25px); 


S uw YY 


EIE 
PEA E 
PRAHE 


图 202” 当 子 元 素 超 出 容器 时 ，CSS 网 格 会 自动 调整 











grid-row: span 3; 
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也 可 以 同时 合并 多 行 和 多 列 ， 如 图 203 所 示 。 


grid-template-columns: repeat(5, 25px); 








图 203 合并 多 行 和 多 列 


请 注意 路 行 或 路 列 的 子 元 素 周 于 的 子 元 素 如 何 目 适应 。 所 有 子 元 素 仍 都 在 网 格 布局 中 ,但 
MWEERHEIBUSAmB TOU, WE 204 rn. 
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- 
grid-column: span 3; 
grid-row: span 3; 


图 204 ”其 他 子 元 系 环绕 着 跨行 或 跨 列 的 子 元 系 
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在 试图 大 范围 破坏 布局 时 ， 我 遇 到 了 如 图 205 所 示 的 情况 。 这 体现 了 CSS 网 格 布局 的 主要 
局 限 性 : 它 会 用 空白 替换 网 格 。 
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空间 过 剩 
图 205 CSS 网 格 布局 用 空白 殖 换 被 挤 出 或 空余 的 网 格 


17.9 起 点 和 终点 


我 们 已 经 知道 ， 可 以 用 span 属性 在 CSS 网 格 布局 中 创建 跨行 或 跨 列 的 子 元 素 。 不 过 
CSS 网 格 布 局 还 提供 了 另 个 更 优雅 的 解决 方案 来 实现 同样 的 效果 。 





属性 grid-row-start 和 grid-row-eng 可 以 分 别 定义 子 元 素 在 CSS 网 格 布局 中 的 起 点 
和 终点 。 对 应 于 列 的 两 个 属性 是 grid-column-start 和 grid-column-end。 此 外 ， 还 有 其 
个 相对 应 的 简写 属性 . grid-row: 1/2 和 grid-column: 1/2, 


这 些 属性 与 span 在 原理 上 略 有 不 同 。 使 用 -start 和 -end， 可 以 将 子 元 素 移 动 到 CSS 网 
格 布 局 中 的 其 他 位 置 。 来 看 一 个 简单 的 例子 ， 如 图 206 所 示 。 
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background: yellow; 
grid-row-start: 2; 
grid-column-start: 2; 





background: yellow; 





图 206 利用 grid-row-start fHgrid-column-start KTA 1 移动 到 另 一 个 位 置 





在 图 207 中 ， 我 们 用 gria-row-start 和 grid-column-start KWEA J TICA 8 的 起 点 。 
但 是 需要 注意 ， 仪 设置 起 点 是 无 效 的 ， 因 为 子 元 双 8 已 经 位 于 网 格 布局 中 的 那个 位 置 了 。 如 果 
在 此 基础 上 使 用 gridg-row-end 和 griqd-column-eng 指定 终点 ， 就 可 以 实现 类 似 跟 行 或 跨 列 


合并 的 效果 。 


EE 


容器 
- B grid-template-columns: 100px 100px 100px 100px 100px 100px; 
grid-template-rows: 100px 100px 100px 100px; 
子 元 素 |8 | 
1 row-start: 2 ; 
L grid- row-end: 4; 
grid-column -start: 2: 
E ej column-end: 6; 


图 207 通过 设置 起 点 和 终点 实现 跨行 和 跨 列 














有 趣 的 是 ，CSS 网 格 布局 的 设计 者 认为 起 点 和 终点 的 顺序 并 不 重要 。 不 管 行 和 列 的 起 点 和 
终点 顺序 如 何 ， 都 会 在 对 应 区 域内 创建 相应 的 元 素 ， 如 图 208 所 示 。 
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grid-column-start: 2 ; 
grid-row-start: 2; 
grid- -column-end: 8; 
grid-row-end: 4; 


grid-column-start: 6 ; 
grid-row-start: 4 ; 
grid-column-end: 2 ; 
grid-row-end: 2; 


图 208 无 论 起 点 和 终点 的 顺序 如 何 ， 都 会 产生 相同 的 效果 


来 看 图 209 中 的 这 个 6x4 的 CSS 网 格 布 局 。 如 宁 为 菜子 元 素 的 列 指定 的 结束 位 置 超过 了 
列 数 〈 在 本 例 中 是 大 于 6 )， 驶 会 产生 如 图 所 示 的 奇怪 效 末 。 


DC S o ow ww 


DAMEN L a a ME" 





background: yellow ; 
grid-row-start: 2; 
grid-column-start: 3; 
grid-column-end: 7; 





图 209 grid-column-end 的 值 大 于 CSS 网 格 的 列 数 


在 设计 布局 时 ， 请 牢记 网 格 的 边界 ， 避 免 发 生 这 种 情况 。 
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17.40 ”起 点 和 终点 的 简写 形式 


与 单独 使 用 -start Jl -end 一 样 ， 使 用 简写 属性 grid-row 和 grid-column 也 可 以 实现 
相同 的 效果 。 以 图 210 AB, BHT / 之 前 的 是 起 点 ， 斜 杠 / 之 后 的 span EIE f ESJERIT) 35. 
或 高 度 。 
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[210 grid-row 和 grid-column 





-H- 
A. 


grid-row: 2 / span 2; 


17 grid-column: 2 / span 4; H1. 





如 于 需要 路 越 到 网 格 的 边界 ， 该 怎么 办 呢 ? 当 列 数 或 行 数 未 知 时 ， 使 用 -1 可 以 将 一 行 或 一 





列 耳 接 扩展 到 网 格 的 边界 ， 如 图 211 所 示 。 但 是 震 要 注意 ， 一 些 子 元 素 可 能 会 被 挤 出 网 格 。 


[1) [2] a] ry [a] la] (T 
Dy : y / : : 
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子 元 素 [8| 










grid-row: 2 / 2: 
grid-column: 2 /-1; 


ejes |n 


图 211 使 用 -1 直接 跨越 到 网 格 的 右边 界 
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如 果 对 行 执行 相同 的 操作 ， 可 能 会 发 现 网 格 变 得 很 乱 ， 上 有 具体 取决 于 提供 的 属性 值 组 合 ， 如 
图 212 所 示 。 这 个 示例 仅 使 用 了 10 个 子 元 素 ，CSS 网 格 会 调整 其 大 小 。 
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grid-column: 2 / 6; 
grid-row: 2 / -1; 





图 212 ”对 行 执行 相同 的 操作 


让 尝试 对 行 执行 相同 的 操作 时 ， 我 发 现 似 乎 必须 把 grid-column: 2/4; 中 的 2/4 更 改 为 
2/6， 但 前 提 是 设置 了 grid-row: 2/-1;。 


我 们 可 以 对 此 进行 扩展 。CSS 网 格 具有 和 辅助 坐标 系 ， 由 于 无 论 从 哪个 方向 进行 跨 列 和 跨行 
都 无 天 紧要 ， 因 此 可 以 使 用 人 负 值 ， 如 图 213 所 示 。 
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grid-column: -6 / -2; 
grid-row: -2 / -4; 





图 213 Jjgrid-column 和 grid-row 指定 负 值 


如 你 所 见 ，CSS 网 格 的 坐标 系 非 常 灵活 。 


17.11 内容 对 齐 方 式 


假设 你 已 经 通过 努力 精通 了 CSS 网 格 布局 的 span 属性 ,并 且 了 解 了 隐 式 行 和 隐 式 列 。 现在 ， 
你 应 该 好 奇 还 有 什么 其 他 知识 。 

















有 个 好 消息 。 作 为 网 页 设计 师 ， 我 一 直 渴 望 实现 多 方向 的 浮动 效果 。 我 希望 元 素 能 够 在 容器 
的 中 间 和 任何 角落 浮动 。 此 功能 只 能 利用 CSS 网 格 布局 的 align-self 属性 和 justify-self 
属性 实现 ， 而 无 法 在 任何 其 他 HTML 元 素 上 实现 。 如 果 整 个 网 站 的 布局 都 是 使 用 CSS 网 格 构建 
的 ， 那 么 它 可 以 解决 边 角 元 条 和 中 心 元 系 放 置 的 许多 问题 。 
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图 214 展示 了 使 用 align-self 属性 和 justify-self 属性 的 例子 。 组 合 使 用 这 两 个 属性 
及 其 属性 值 start 和 end， 就 可 以 产生 如 图 中 9 个 网 格 所 示 的 不 同 效 果 。 因 为 效果 非常 直观 ， 
所 以 这 里 不 再 获 述 。 

行内 元 素 


[4] [31] [3] [4] 






































图 214 组 合 使 用 align-self 和 justify-self 的 效果 


垂直 方向 : 使 用 align-self: start; 可 以 将 内 容 对 齐 到 元 素 的 顶部 。 与 之 类 似 ， 使 用 
align-self: end; 可 以 将 内 容 对 齐 到 元 系 的 底部 。 





水 平方 向 : 使 用 justify-self: start; ÁWljustify-self: end; 分 别 将 内 容 设置 为 左 
对 齐 和 右 对 齐 。 与 align-self 相 结 合 ， 就 可 以 实现 图 214 中 的 所 有 对 齐 方 式 。 


K| 215 展示 了 align-self 分 别 取 属性 值 start. center, ena 时 的 效果 。 
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grid-row: 2 / 2; 1 1 
grid-column: 2 / 4; 


grid-column: 2 / 4; | | 
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align-self- end; 
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grid-row: 2 / 2; [— — — 
grid-column: 2 / 4; 


grid-row: 2 / 2; 1 | 
grid-column: 2 / 4; | 
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图 215. align-self 的 不 同 效果 





需要 注意 的 是 ，align-self 并 没有 名 为 top F bottom 的 属性 值 。 
在 水 平方 向 上 可 以 达到 同样 效果 的 属性 是 justify-self， 如 图 216 所 示 。 


L1J [2 kj [s] [s] 
—«—Á NA NS NA ~ 
| | | 
:> t + 


未 设置 justify-self: start; justify-self: center; justify-self: end; 


图 216 justify-self 的 不 同 效果 


在 本 例 中 ， 也 可 以 用 left RR start, mH right EH ena, 


17.12 模板 区 域 


模板 区 域 ( template area ) 通过 预定 义 的 名 称 指 代 网 格 中 的 独立 部 分 。 预 定义 的 名 称 不 能 
含 空 格 ， 可 用 “-” 代 奉 ， 如 图 217 所 示 。 
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二 一 一 


图 217 模板 区 域 示 例 
一 行内 的 名 称 可 以 用 双 引 号 包 襄 ， 如 下 所 未 


grid-template-areas: "TopLeft Top TopRight" "Left Middle-of-Nowhere" "BottomLeft 
ISione te eITR e e I6 EXT TONT 





在 图 217 中 ， 人 尽管 子 元 系 只 占用 了 5 个 网 格 , 但 在 逻辑 上 也 可 以 命名 尚未 被子 元 系 占用 的 
PE o 


可 以 为 任何 行 和 列 指定 一 个 区 域 ， 
这 也 意味 着 





只 需 在 双 引 号 中 键 人 名 称 集合 ， 并 用 空格 来 分 隔 名 称 。 
， 在 模板 区 域名 称 中 不 允许 有 空格 。 





在 多 个 容器 中 组 合同 名 区 域 非常 方便 。 如 图 218 所 示 ， 在 左 栏 和 右 栏 中 分 别 有 3 个 同名 的 
ToUx&. CSS 网 格 模板 区 工会 日 动 将 子 元 系 组 合 起 来 ， 按 名 称 占用 相同 的 空间 。 
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[2] | [4] 
2 9 Uu 


.item2 









a» o-— 


.item1 í(grid-area: Left;) .item3 í(grid-area: Right;) 
图 218 相 邻 的 块 合并 为 更 大 的 区 域 


确保 合并 后 的 区 域 是 矩形 ， 这 一 点 非 第 重要 。 在 这 里 玩 俄 罗斯 方块 的 把 戏 是 没 用 的 。 如 来 
不 遭 循 这 条 规则 ， 就 可 能 破坏 CSS 网 格 布局 ， 并 产生 不 可 预测 的 结果 。 


17.13 ”为 网 格 线 命 名 


随 春 开 发 时 间 的 推移 ， 使 用 数字 (包括 负数 ) 指 代 网 格 线 可 能 会 变 得 难以 辨识 ， 在 处 理 复 
杂 的 网 格 布局 时 尤其 如 此 。 在 这 种 情况 下 ， 可 以 在 标 板 的 行列 之 前 采用 [ 名 称 ] 这 种 形式 为 网 
格 线 命名 。 

举例 来 说 ， grid-template-columns: [left] 100px; 将 第 l 条 垂直 网 格 线 命 名 为 lefto 
FJ, grid-template-rows: [top] 100px; 将 第 1 条 水 平 网 格 线 命 名 为 top。 要 同时 命名 
多 条 网 格 线 ， 可 以 采用 如 下 形式 。 








grid-template-columns: [left] 5px 5px [middle] 5px 5px [right]; 


这 样 一 来 ， 就 可 以 用 left, middle, right 来 引用 对 应 的 网 格 线 了 ， 如 图 219 所 示 。 
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grid-template-columns: [left] 100px 100px 100px [middle] 100px 100px 100px [right]; 


grid-template-rows: [top] 100px 100px 100px [center] 100px 100px 100px [bottom]; 
Kj 219 为 网 格 线 命名 


命名 网 格 线 ( 也 就 是 间隔 ) 非常 有 意义 。 以 图 219 为 例 ， 将 中 间 线 命名 为 miaale ( 中间 ) 
比 称 其 为 “第 4 个 间 隅 ”要 直观 得 多 。 

总 之 ， 请 记 住 砚 扎 特 说 过 的 一 句 话 :“ 音 乐 不 在 音符 里 ， 而 在 音符 间 的 留 白 里 。” 这 人 句 话 也 
适用 于 CSS 网 格 布局 。 

我 化 了 近 8 周 的 时 间 绘 制 本 间 的 示意 图 ,希望 你 能 从 中 有 所 收获 。 当 然 ， 我 可 能 有 所 琉 
汤 一 一 把 每 一 个 可 能 的 例子 都 写 下 来 是 一 项 不 可 能 完成 的 任务 。 我 很 乐意 收 到 你 的 反馈 ， 以 便 
我 在 本 书 的 更 新 版 中 加 入 更 好 的 例子 。 
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CSS 与 太空 中 的 特 斯 拉 


虽然 CSS 是 为 网 站 与 Web 应 用 程序 的 布局 而 生 的 ， 但 有 些 才华 横 溢 的 用 户 界 面 设 计 师 把 它 
用 到 了 极致 。 有 人 会 说 ， 这 样 做 没有 实际 意义 。 然 和 而， 这些 艺术 家 通过 对 CSS 属性 及 其 属性 值 
的 深入 理解 ， 创 作出 了 极 富 挑战 性 的 作品 。 








图 220 是 由 前 端 开 发 人 员 Sasha Tran 完全 用 CSS 创作 出 来 的 “太空 中 的 特 斯 拉 汽 车 ”™。 





.front { left: -190px; } rear { right: -130px; } 





图 220 CSS 作品 “太空 中 的 特 斯 拉 汽 车 ”"， 经 Sasha Tran 授权 使 用 





本 章 将 详细 讲解 如 何 用 CSS 创建 这 辆 车 的 各 个 部 分 ， 以 及 这 些 部 分 使 用 了 哪些 CSS 属性 。 
要 创作 出 这 样 的 CSS 作品 ， 我 们 需要 熟练 掌握 以 下 CSS 属性 及 其 属性 值 。 








CD 造型 灵感 来 源 于 2018 年 由 SpaceX 公司 的 重型 运载 火箭 送 入 太空 的 特 斯 拉 跑车 。 一 一 编者 注 
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L] overflow 
QJ transtorm 
UD box-shadow 


ü border-radius 


即使 对 于 网 页 设计 师 来 说 ， 创 作 CSS 艺术 作品 也 是 一 个 挑战 。 我 们 现在 正在 把 从 本 书 中 学 
到 的 所 有 知识 付 诸 实践 ! 


把 所 有 元 系 都 变 透明 之 后 ， 可 以 清晰 地 看 到 “太空 中 的 特 斯 拉 汽 车 ”由 数 个 HTML <div> 
元 素 组 成 ， 如 图 221 所 示 。 





图 221 “大 空中 的 特 斯 拉 汽 车 ”由 数 个 HTML <div> 元 素 组 成 








接 下 来 ， 我 们 将 分 析 特 斯 拉 汽 车 的 各 个 部 分 。 本 章 未 尾 会 给 出 这 些 部 分 的 CSS 代码 。 


如 图 222 所 示 ， 头 亦 由 一 个 圆 和 权 色 的 面 叶 组成。 权 色 面 鄙 其实 是 一 个 正方 形 的 一 部 分 ， 
它 经 过 旋转 后 被 圆 形 分 割 ， 这 是 因为 .face 设置 了 overflow: hidden;, 
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.face 1 
position: absolute; 
width: 40px; 
height: 40px; 
border-radius: 50%; 
background-color: #f2f2f2; 
top: -60px; 
left: -10px; 
border: 4px solid $border; 
overflow: hidden; 
box-shadow: inset -4px -4px 0 rgba(#333, 0.2); 


&:before { 

position: absolute; 
content: ""; 
width: 17px; 
height: 17px; 
border-radius: 3px; 
background: #f7ac76; 
transform: rotate(-45deg); 
left: -7PX; 
top: 7px; 
border: 2px solid $border; 
box-shadow: 

inset -5px 5px 

3px 0 rgba( #fff, 0.4); 


[222 rS ERRAT 


注意 ，&:pefore ABRES EE .face 中 的 。 这 样 的 写法 是 通过 Sass 扩展 实现 
的 。 第 1 草 对 Sass 进行 过 简短 的 讨论 。 











当然 ， 也 可 以 用 标准 CSS 重 写 它 。 方 法 是 把 &:before 和 花 括 号 中 的 内 容 替 换 为 ID 或 类 
的 选择 器 
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如 图 223 所 示 ， 发 动机 盖 是 一 个 只 旋转 了 1 度 的 长 覃 圆 形 。 与 头盔 面 置 一样， 前 车 灯 用 
overflow: hidden; 约束 在 父 元 素 中 ， 隐 藏 溢出 可 以 帮助 我 们 创建 贴近 现实 物体 的 复杂 不 规 
则 形状 。 







&-bumper-top 1 
width: 135px; 
height: 23px; 
position: absolute; 
background-color: $car-body; 
border: 4px solid; 
border-radius: 5095; 
top: -8px; 
left: -235px; 
transform: rotate(1deg); 
border-color: $border transparent transparent $border; 
overflow: hidden; 
z-index: 99; 
box-shadow: inset 0 3px 0 rgba( Z-fff, 0.17); 


.front-light-bulb 1 
position: absolute; 
width: 33px; 
height: 10px; 
background: 

rgba(#fff, 0.5); 
transform: 
rotate(-10deg); 
border-radius: 50px 0; 
left: -4px; 
top: 1px; 


图 223 UNA SL DAT 
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在 CSS 艺术 创作 中 ，overflow: hidden; 的 重要 性 不 容 小 般 。 后 车 灯 的 创作 方法 与 前 两 
个 例子 完全 相同 ， 如 图 224 所 示 。 汽 车 的 后 部 是 一 个 经 过 旋转 的 矩形 ， 它 有 一 个 角 是 圆 角 。 我 
们 只 需 赁 艺术 直觉 创 造 符合 自身 喜好 和 风格 的 形状 即 可 。 











&-rear-top 1 
position: absolute; 
width: 113px; 
height: 33px; 
background-color: $car-body; 
top: -25px; 
left: 50px; 
border-radius: 0 70% 0 0; 
transform: rotate(9.2deg); 
border: 4px solid; 
border-color: 
$border $border transparent transparent; 
z-index: $hand; 
box-shadow: inset 0 4px 0 rgba(#ff0, 0.17); 
.back-light { 
position: absolute; 
width: 23px; 
height: 10px; 
background-color: $border; 
top: 27px; 
left: 94px; 
z-index: 0; 
border-radius: Opx 0 0 50px; 


} 
图 224 剖析 汽车 后 部 
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车 吴 是 一 个 很 大 的 矩形 «div» nR, CRANA, HARAR, WE 225 所 示 。 





&-fender { 

position: absolute; 

top: -2px; 

left: -100px; 

width: 260px; 

height: 65px; 

border-radius: 30px 20px 40px 20px; 

background-color: 4£ce4038; 

border: 4px solid; 

border-color: $border; 

z-index: $car-rear; 

overflow: hidden; 

box-shadow: inset 0 4px 0 rgba(#fff, 0.17), 
inset -5px -4px 0 rgba( #333, 0.2); 


K225 grs 
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轮胎 部 分 再 次 使 用 了 Sass/SCSS， 如 图 226 所 示 。& 代表 该 元 素 ( 概念 上 类 似 于 JavaScript 
中 的 this )， 意 即 该 元 素 本 身 。 第 2 章 讨 论 过 ，:pefore 和 :after 是 伪 元 素 选 择 器 ， 实 际 上 
属于 同一 个 HTML 元 素 。 使 用 它们 可 以 直接 创建 附加 图 形 ， 而 不 用 骸 套 其 他 新 元 素 。 











&-tire { 
.front,.rear { 

width: 60px; 

height: 60px; 
background: $border; 
position: absolute; 
border-radius: 50%; 
top: 22px; 

z-index: tire; 

display: flex; 
justify-content: center; 
align-items: center; 


&:before { 
position: absolute; 
width: 60px; 
height: 60px; 
content: ""; 
border: 5px solid #333; 
opacity: 0.2; 
border-radius: 50%; 


图 226 齐 析 轮胎 部 分 
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现在 我 们 已 经 知道 用 CSS 绘制 特 斯 拉 汽 车 的 方法 啦 ! 本 和 草 只 谢 析 了 几 个 关键 的 CSS 属性 。 
H T ERITXIZ, Rk f —283$ ILB PE , 例如 top. left, width, heights 


以 下 给 出 上 述 部 分 的 CSS 代码 了 。 


.face { 
position: absolute; 
wiclithe T rc 
height: 400x37 
border rachito 5057 
packoground color: ar E2 EEL 
TOO: 00 
letts =10px; 
ponden: pi cobri bone 
overflow: hidden; 
box-shadow: inset -4px -4px rgba(4333, 0.2); 


&:before { 
position: absolute; 
Contente T13 
widths 17px} 
heights 17px; 
border-radius: 3px; 
packgroundk tse. 
tronstorm: rotacte(-45deg; 
letts Dx 
TOP: Vox. 
border i pA coki pores 
lox shadow inser 5PX 5px 5px O maa 0-42) 


发 动机 一 部 分 


&-bumper-top i1 
widths 135px; 
heights 230x} 
position: absolute; 
background-color: S$car-bodyv; 
borden o» cob 
bondens racie 50s 
TOD; Imo: 





COD 若 想 查看 整个 作品 的 完整 代码 ， 请 访问 图 灵 社 区 : http://www.ituring.cn/book/2764。 一 一 编者 注 
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absolute; 
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align-content 89 
align-items Il 
align-self 122 
backface-visibility $82 
background-attachment 63 
background-origin 64 
Þackground position 39 
background repeat 56 
background-size 57 
border-radius 34 

Dox- shadow 30 
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clear 45 
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grid-column 113 
grid-column-end 117 
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grid-column-start 116 
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grid-row 119 
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perspective 78 
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radial-gradient 52 
repeating-linear-gradient 53 
repeating-radial-gradient 53 
row-reverse $5 

text-align 20 
text-align-last 21 
text-anchor 32 


text-combine-upright 22 


text-decoration-skip-ink 
text-indent 26 
text-orientation 27 
text-rendering 25 
text-shadow 30 
transform 74 
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visibility 44 
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回复 “CSS” 查 看 相关 书 单 








微 博 连接 
天 注 @ 图 灵 教 育 每 日 分 享 |T 好 书 


名 








QQ 连接 


图 灵 读 者 官方 群 I: 218139230 
图 灵 读 者 官方 群 I: 164939616 


图 灵 社 区 
iTuring.cn 
在 线 出 版 ,电子 书 , (ER) AE, 图 灵 访 谈 


=I 1 
CSSEIS 
CSS Visual Dictionary 
你 知道 如 何 用 CSS 画 圆 形 、 和 矩形 和 正方 形 吗 ? 
你 知道 如 何 使 这 些 基 本 形状 变 得 不 规则 吗 ? 
你 知道 如 何 用 CSS 组 合 不 规则 形状 ， 从 而 创作 出 艺术 作品 吗 ? 





本 书 用 200 余 幅 示 意图 展示 了 CSS 属 性 的 丰富 效果 。 用 好 这 些 属 性 ， 你 就 
能 成 为 富有 艺术 气息 的 Web 前 并 设 计 师 。 快 拿 起 CSS “ 男 笔 。， 一 起 来 创 
作 吧 | 


EE 一 一 一 一 英文 版 读者 评论 


“这 本 书 列 藏 精华 ， 我 每 次 翻 开 它 都 有 新 的 收获 。” 
“我 学 CSS 不 久 ， 非 常 庆幸 能 有 这 本 图 解 书 作 为 参考 和 指导 。” 
“如 果 你 想 快速 了 解 弹性 盒 布 局 和 网 格 布局 ， 那 么 选择 这 本 书 不 会 错 。” 





图 灵 社 区 : iTuring.cn ee N Ill 
热线 : (010)51095183 转 600 前 诺 研 发 学 习 小 组 

分 类 建议 : 计算 机 /Web 开 发 /CSS 
人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn Sae 


787115754457 








